PHP Photo Album

[jscheuer1]

1) Script Title: PHP Photo Album

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/php-photoalbum.htm

3) Describe problem: Here:


function phpimagealbum(setting){
this.albumvar=setting.albumvar
this.albumvar.images.pop() //remove last "dummy" array element
for (var i=0; i<this.albumvar.images.length; i++){
if (this.albumvar.desc[i]) //if a manual desc exists for this image
this.albumvar.images[i][3]=this.albumvar.desc[i] //extend image array with desc
}
this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
this.dimensions=setting.dimensions || [3,3]
this.sortby=setting.sortby || ["file", "asc"],
this.autodesc=setting.autodesc
this.showsourceorder=setting.showsourceorder
this.onphotoclick=setting.onphotoclick || function(){}
this.photodivs=[] //array referencing each DIV that contains a slide
this.navlinks=null //HTML collection
if (setting.sortby[0]=="file") //sort by filename (asc)
this.albumvar.images.sort(function(a,b){return a[1].localeCompare(b[1])})
else //sort by date (asc)
this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])})
if (setting.sortby[1]=="desc"){
this.albumvar.images.reverse()
}
this.buildgallery()
this.buildnav()
}

The descriptions get assigned before the images are sorted. The designer using this script will assign descriptions based upon the sorted order he/she can see, so assinging the descriptions after sorting makes more sense:


function phpimagealbum(setting){
this.albumvar=setting.albumvar
this.albumvar.images.pop() //remove last "dummy" array element
this.albumdivid='phpphotoalbum'+(++phpimagealbum.routines.albumcount)
this.dimensions=setting.dimensions || [3,3]
this.sortby=setting.sortby || ["file", "asc"],
this.autodesc=setting.autodesc
this.showsourceorder=setting.showsourceorder
this.onphotoclick=setting.onphotoclick || function(){}
this.photodivs=[] //array referencing each DIV that contains a slide
this.navlinks=null //HTML collection
if (setting.sortby[0]=="file") //sort by filename (asc)
this.albumvar.images.sort(function(a,b){return a[1].localeCompare(b[1])})
else //sort by date (asc)
this.albumvar.images.sort(function(a,b){return new Date(a[2])-new Date(b[2])})
if (setting.sortby[1]=="desc"){
this.albumvar.images.reverse()
}
for (var i=0; i<this.albumvar.images.length; i++){
if (this.albumvar.desc[i]) //if a manual desc exists for this image
this.albumvar.images[i][3]=this.albumvar.desc[i] //extend image array with desc
}
this.buildgallery()
this.buildnav()
}

That way, no convoluted logic is required visa vis the sort order option to determine which description to assign to which image. Keep in mind that the sort order will change if the order of the images in the folder with the images in it is changed. This can happen when migrating to a new server, or just by removing all of the images from the folder and uploading them again in a different manner than before. Or even when updating individual images.

[ddadmin]

Both setups have their issues and upside. The idea for the original method of assigning the descriptions is so that they still correspond to the correct images if the user changes the sort parameter (ie: from by date ascending to by title descending)- in this case, the descriptions still match up with the proper image. With your method the descriptions continue to point at the images at that position, which are now out of sync. The upside of your method though is that it's more intuitive in a way, especially the initial set up. Did I miss anything else?

[jscheuer1]

I had thought of reporting this before, but didn't because at that time I thought that either way things can get messed up. This time I wasn't thinking as clearly.

Sure doing as I suggest, if you change the sorting method, you would have to change the desc array.

But using the current official method, if you upload the same images again to the same folder, it can change. Or if you even just update one image, not to mention several or more images, or if you change folders or servers, still using the same images, it can change.

So clearly I was right the first time in a sense in not reporting it, and clearly substituting one unreliable method for another isn't going to solve things. But I now think, even if things can get messed up either way, it's simpler overall to do it in the more intuitive manner.

A real solution however would be a different method altogether, perhaps something object based, consider the following:


<script type="text/javascript">
var albumvar = {};

albumvar.desc = {
'some.jpg': 'Description for some.jpg',
'apng.png': 'Description for apng.png',
'yetanotherimage.gif': 'The Description for this one'
};

alert(albumvar.desc['apng.png']); //alerts Description for apng.png
</script>

Since the generated images array uses the filename as well, those could be easily matched up. It wouldn't matter what order the desc object was in and it wouldn't matter what order the images array was in.

In the phpimagealbum function you could do, before or after the images were sorted:


for (var i=0; i<this.albumvar.images.length; i++){
if (this.albumvar.desc[this.albumvar.images[i][1]]) //if a manual desc exists for this image
this.albumvar.images[i][3]=this.albumvar.desc[this.albumvar.images[i][1]] //extend image array with desc
}

But you wouldn't have to because when it comes time to use the descriptions if any (at the end of line #114 in the current official version):


(albumvar.images[i][3]? '<br />'+albumvar.images[i][3] : (desc)? desc : '')

One could do instead:


(albumvar.desc[albumvar.images[i][1]]? '<br />'+albumvar.desc[albumvar.images[i][1]] : (desc || ''))

But I'm wondering if that '<br />'+ is even needed, couldn't we make the thumnail images display block or otherwise ensure wrapping? If so we could do:


(albumvar.desc[albumvar.images[i][1]] || desc || '')

You could, in getalbumpics.php, change:


echo " desc: []\n";

to:


echo " desc: {}\n";

Then on the page, the designer using this script could instead of:


myvacation.desc[2]="This is description for the 3rd picture in the album"

do:


myvacation.desc['red_barn_25.jpg']="A Red Barn on Route 25 in New Hampshire"

Just some thoughts, as I see your point, but this has been bothering me for some time.

Added Later:

I just tried it out and it works. It doesn't matter what order the images are in on the server or how you sort them. I took a slightly different approach than mentioned above. I got rid of:


for (var i=0; i<this.albumvar.images.length; i++){
if (this.albumvar.desc[i]) //if a manual desc exists for this image
this.albumvar.images[i][3]=this.albumvar.desc[i] //extend image array with desc
}

and changed buildimage to:


buildimage:function(albumvar, i, desc, showorder){
desc=albumvar.desc[albumvar.images[i][1]]? '<br />'+albumvar.desc[albumvar.images[i][1]] :
(desc && desc!="")? '<br />' + desc.replace(/(%i)|(%d)|(%s)/g, function(m){
return (m=="%i")? i+1 : (m=="%d")? albumvar.images[i][2] : ""
}) : ''
return (showorder? '<b style="color:red">Source Order: '+albumvar.images[i][0]+'</b><br />' : '') + '<img src="' + albumvar.baseurl + albumvar.images[i][1] + '" data-index="' + i +'" />' + desc
},

You don't really have to change getalbumpics.php (though there are some changes I would make, and it would be a good idea to make desc a true object {} instead of an array []) because an array is an object.

This preserves the current version's use of the <br />.

So just with the altered script:

5244

You may now use the new syntax for desc as noted above, ex for the jaguar one:


jaguar.desc['jag11.jpg'] = "Custom Description for this Image"