Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts

    Image Description

    hi guys

    i have been making a personal picture album online...

    Farting Fish

    When you click on an image to see a larger version there is a blank space to the right, i was wondering if theres an easy way of me putting an image description in there, but it needs to be easy to change descriptions on images, because my next challenge is to make a form where users can upload images and add a description

    thanks in advance

    jon

  • #2
    New to the CF scene
    Join Date
    May 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    welll less seee, you said you're creating it yourself, did you use mysql? if you did you could easily add a 'description' column to the table that holds the image info

  • #3
    Regular Coder
    Join Date
    May 2006
    Location
    Bristol, UK
    Posts
    147
    Thanks
    6
    Thanked 2 Times in 2 Posts
    hi mate

    i havent got a database, all i have at the moment is:

    getpics.php
    PHP Code:
    <?
    Header
    ("content-type: application/x-javascript");

    function 
    returnimages($dirname=".") {
       
    $pattern="\.(jpg|jpeg|png|gif|bmp)$";
       
    $files = array();
       
    $curimage=0;
       if(
    $handle opendir($dirname)) {
           while(
    false !== ($file readdir($handle))){
                   if(
    eregi($pattern$file)){
             
    $filedate=date ("M d, Y H:i:s"filemtime($file));
                     echo 
    'galleryarray[' $curimage .']=["' $file '", "'.$filedate.'"];' "\n";
                     
    $curimage++;
                   }
           }

           
    closedir($handle);
       }
       return(
    $files);
    }

    echo 
    "var galleryarray=new Array();" "\n";
    returnimages();
    ?>
    i put that in the gallery directory, and then i have the javascript

    Code:
    <script src="http://www.fartingfish.com/gallery/getpics.php" type="text/javascript"></script>
    
    <script type="text/javascript">
    
    
    var dimension="4x2" //Specify dimension of gallery (number of images shown)
    var imagepath="http://www.fartingfish.com/gallery/" //Absolute path to image directory.
    var href_target="new" //Enter target attribute of links, if applicable
    
    //Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
    var popupsetting=[1, "width=500px, height=400px, scrollbars, resizable"]
    
    //Toggle image description: descriptionprefix[0 or 1, "Text to show" (if 1)]
    var descriptionprefix=[0, "image"]
    
    //Sort images by date? ("asc", "desc", or "")
    //"desc" for example causes the newest images to show up first in the gallery
    //"" disables this feature, so images are sorted by file name (default)
    var gsortorder="desc"
    
    //By default, each image hyperlinks to itself.
    //However, if you wish them to link to larger versions of themselves
    //Specify the directory in which the larger images are located
    //The file names of these large images should mirror those of the original
    //Enter a blank string ("") to disable this option
    var targetlinkdir="http://www.fartingfish.com/largegallery/"
    
    /////No need to edit beyond here///////////////////
    
    function sortbydate(a, b){ //Sort images function
    if (gsortorder=="asc") //sort by file date: older to newer
    return new Date(a[1])-new Date(b[1])
    else if (gsortorder=="desc") //sort by file date: newer to older
    return new Date(b[1])-new Date(a[1])
    }
    
    if (gsortorder=="asc" || gsortorder=="desc")
    galleryarray.sort(sortbydate)
    
    var totalslots=dimension.split("x")[0]*dimension.split("x")[1]
    
    function buildimage(i){
    var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
    var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" onClick="return popuplinkfunc(this)">'
    tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
    tempcontainer+='</a><br />'
    tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
    return tempcontainer
    }
    
    function jumptopage(p){
    var startpoint=(p-1)*totalslots
    var y=1;
    for (i=0; i<totalslots; i++){
    document.getElementById("slide"+i).innerHTML=(typeof galleryarray[startpoint+i]!="undefined")? buildimage(startpoint+i) : ""
    }
    while(document.getElementById("navlink"+y)!=null){
    document.getElementById("navlink"+y).className=""
    y++
    }
    document.getElementById("navlink"+p).className="current"
    }
    
    var curimage=0
    for (y=0; y<dimension.split("x")[1]; y++){
    for (x=0; x<dimension.split("x")[0]; x++){
    if (curimage<galleryarray.length)
    document.write('<div id="slide'+curimage+'" class="slideshow">'+buildimage(curimage)+'</div>')
    curimage++
    }
    document.write('<br style="clear: left" />')
    }
    
    function popuplinkfunc(imgsrc){
    if (popupsetting[0]==1){
    var popwin=open(imgsrc.href, "popwin", popupsetting[1])
    popwin.focus()
    return false
    }
    else
    return true
    }
    
    </script>
    Now, a friend of mine wrote the javascript and helped me with the php because i am not good enough in js or php to do this.

    All i want really is a form that will upload an image to a chosen directory and allow you to put an image description that will sit next to the image when you click on it.

    hope that gives u a better idea

  • #4
    Senior Coder
    Join Date
    Nov 2002
    Location
    North-East, UK
    Posts
    1,265
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You would be best off coverting this to a database where you hold the image names, titles, paths, description etc.

    With the setup now you have no association between an image and a description.

    You could create an array to match the size of the images and add a description to each, but it's messy and will probably break easily when adding new images to the folder.

  • #5
    mio
    mio is offline
    New Coder
    Join Date
    May 2006
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    if you really don't want to use database, as you save the image file to a directory, also create ONCE in the same directory a text file which will contain your img description. As you use it to be displayed in a browser, open your text file and check with regular expression for your image name.

    Example:
    in your directory /myImages, you have:
    girl.jpg, flower.jpg, flower02.jpg, sun.gif, etc...

    create a file in the same directory (or wherever you want):
    imageDesc.extensionuwant, in any case it's only text inside.

    each time you add a new image, add to your desc file respecting a standard format eg:

    pict1:
    date=
    time=
    author=
    desc=

    pict2:
    date=
    time=
    author=
    desc=

    etc...

    so you can easily get the selected picture information.

    Hope it helps


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •