You can keep your edited copy of the script. But get rid of this:
Code:
<script type="text/javascript">
alodia.desc[2]="This is description for the 3rd picture in the album"
alodia.desc[3]="This is description for the 7th picture in the album"
alodia.desc[4]="This is description for the 3rd picture in the album"
alodia.desc[5]="This is description for the 7th picture in the album"
</script>
Replace it with:
Code:
<script type="text/javascript">
alodia.cap = {};
//alodia.cap['imagename.jpg']="Picture slimbox caption here"
alodia.cap['1.jpg']="This is the slimbox caption for 1.jpg"
alodia.cap['3.jpg']="This is the slimbox caption for 3.jpg"
</script>
And replace:
Code:
<script type="text/javascript">
(function(groupName){
var arObj = window[groupName];
for(var i = 0; i < arObj.images.length-1; ++i){
arObj.desc[i] = arObj.images[i][1];
arObj.desc[i] = arObj.desc[i].substring(0, arObj.desc[i].indexOf('.jpg'));
}
})('alodia');
phpimagealbum.prototype.createHiddenLinks = function(){
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + new Date().getTime() + ']';
for(i = 0; i < av.images.length; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = av.baseurl+ av.images[i][1];
lbLink.title = av.desc[av.images[i][0]];
lbLink.target = av.images[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
av.hiddenLinks = d.getElementsByTagName('a');
};
new phpimagealbum({
albumvar: alodia, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [4,2],
sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
//autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
// showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex){
var al = this.albumvar.hiddenLinks, i = al.length - 1;
for (i; i > -1; --i){
if(al[i].target == thumbindex){
jQuery(al[i]).click();
}
}
}
}).createHiddenLinks();
</script>
with:
Code:
<script type="text/javascript">
phpimagealbum.prototype.createHiddenLinks = function(){
var d = document.createElement('div'), tmpLink = document.createElement('a'), lbLink, i, av = this.albumvar;
d.style.display = 'none'; tmpLink.rel = 'lightbox[' + new Date().getTime() + ']';
for(i = 0; i < av.images.length; ++i){
lbLink = tmpLink.cloneNode(false);
lbLink.href = av.baseurl+ av.images[i][1];
lbLink.title = av.cap[av.images[i][1]] || '';
lbLink.target = av.images[i][0];
d.appendChild(lbLink);
}
document.body.insertBefore(d, document.body.firstChild);
av.hiddenLinks = d.getElementsByTagName('a');
};
new phpimagealbum({
albumvar: alodia, //ID of photo album to display (based on getpics.php?id=xxx)
dimensions: [4,2],
sortby: ["file", "asc"], //["file" or "date", "asc" or "desc"]
//autodesc: "Photo %i", //Auto add a description beneath each picture? (use keyword %i for image position, %d for image date)
// showsourceorder: false, //Show source order of each picture? (helpful during set up stage)
onphotoclick:function(thumbref, thumbindex){
var al = this.albumvar.hiddenLinks, i = al.length - 1;
for (i; i > -1; --i){
if(al[i].target == thumbindex){
jQuery(al[i]).click();
}
}
}
}).createHiddenLinks();
</script>
Notes:
Notice the highlighted line in the above:
Code:
lbLink.title = av.cap[av.images[i][1]] || '';
That means that if there is a cap defined, slimbox will use it, otherwise there will be no caption. But you could make that line:
Code:
lbLink.title = av.cap[av.images[i][1]] || av.images[i][1];
and it will give the filename and extension as a caption for those images missing a caption, or:
Code:
lbLink.title = av.cap[av.images[i][1]] || av.images[i][1].substring(0, av.images[i][1].indexOf('.jpg'));
Which would give just the filename, no extension as a caption for those images that have no caption configured for them.
For this part:
Code:
<script type="text/javascript">
alodia.cap = {};
//alodia.cap['imagename.jpg']="Picture slimbox caption here"
alodia.cap['1.jpg']="This is the slimbox caption for 1.jpg"
alodia.cap['3.jpg']="This is the slimbox caption for 3.jpg"
</script>
You may instead use the time saving (as far as the number of keystrokes involved goes) alternative format:
Code:
<script type="text/javascript">
//'imagename.jpg': "Picture slimbox caption here",
alodia.cap = {
'1.jpg': "This is the slimbox caption for 1.jpg",
'3.jpg': "This is the slimbox caption for 3.jpg",
'8.jpg': "This is the slimbox caption for 8.jpg" //<-- Important - no comma after the last entry
};
</script>
Either way, one of the other nice things about this method is that if an image is removed from the folder, you don't have to remove it from the alodia.cap object, its entry will simply be ignored and not affect the order of the others. Entries may be put in any order as well. However, it's best to keep them in numeric order for organizational reasons. You can if you like have more than one entry for the same image though. In which case the script will simply use the last one, ignoring any others for that image that come before it.
PHP Photo Album script v2.11 Captions Inside Lightbox
Reply With Quote
Bookmarks