Link prev and next missing on php album + lightbox

[petri71]

1) Script Title: PHP Photo Album + Lightbox2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm

3) Describe problem:

Hello, I installed the latest version of Lightbox on my php album, everything works fine except I don't get the previous and next link on the pic allowing me to browse the pics without having to close them :

here is the link to the page :

http://www.coquille.org/cellpics/

could not find any posts with the same problem, anyone has an idea ?

[jscheuer1]

You would need to give the images a group name. Where you have:


var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox" title="'+lbtitle+'">'

it should be:


var tempcontainer='<a href="'+imagecompletepath+'" rel="lightbox[gal]" title="'+lbtitle+'">'


However, I would recommend updating to v2.03.3 Released 5/21/07:

http://www.lokeshdhakar.com/projects/lightbox2/

This would allow you to also change this:


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++
}
initLightbox();
document.getElementById("navlink"+p).className="current"
}


to:


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++
}
myLightbox.updateImageList();
document.getElementById("navlink"+p).className="current"
}


This avoids creating duplicate ightbox container markup.

Finally, either way, you need to decide if you want the previous/next to span multiple 'pages' of the PHP photogallery. If so, you should add here:


/////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)

document.write('<div style="display:none;">');
for (var i = 0; i < galleryarray.length; i++){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0];
var lbtitle=galleryarray[i][0].replace(/\.[^.]*$/, '');
document.write('<a href="'+imagecompletepath+'" rel="lightbox[gal]" title="'+lbtitle+'"><\/a>');
}
document.write('<\/div>');


var totalslots=dimension.split("x")[0]*dimension.split("x")[1]

If you were to do it that way, you could dispense with:


initLightbox();

or


myLightbox.updateImageList();

entirely, and hard code your onclick events here:


var tempcontainer='<a onclick="myLightbox.start(this);return false;" href="'+imagecompletepath+'" rel="lightbox[gal]" title="'+lbtitle+'">'

That would prevent quite a few unnecessary event assignments - always a good thing to avoid, especially for IE.