Image Description

[jonnybinthemix]

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

[coolaid]

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

[jonnybinthemix]

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

<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

[degsy]

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.

[mio]

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