PDA

View Full Version : PHP Photo Album + Lightbox v2



garabala
06-19-2006, 01:53 AM
Hi. I've been attempting to combine the PHP Photo Album (http://dynamicdrive.com/dynamicindex4/php-photoalbum.htm) and Lightbox v2 (http://dynamicdrive.com/dynamicindex4/lightbox2/index.htm) scripts and have run into some problems. The first page of images shows the lightbox viewer when clicked fine, but once you click to a different page the lightbox viewer no long appears, instead you are simply linked to the image. When you click back to the first page it no longer works either. A refresh restarts all this.

These are the only modifications I've made to the scripts, all images are in the root directory along with the php scripts.

changed 1 to 0

//Toggle popup link setting: popupsetting[0 or 1, "pop up window attributes" (if 1)]
var popupsetting=[0, "width=500px, height=400px, scrollbars, resizable"]

added the rel="lightbox" tag

var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" rel="lightbox" onClick="return popuplinkfunc(this)">'
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][0]+' ['+galleryarray[i][1]+']" />'
tempcontainer+='</a><br />'

I can't really understand why it won't work as the images on the other pages have the relation: lightbox intact. I hope I've left enough info, thanks in advance for any help.

jscheuer1
06-19-2006, 07:14 AM
As PHP Album rewrites the HTML code on the page (creating links and rels that were not there when the page loaded), you have to initLightbox(); with every jumptoage():


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"
initLightbox();
}

garabala
06-19-2006, 11:44 AM
Simple solution, yet I would've had no idea. Hopefully I'll get better at this.

Thankyou very much!

chillinbro07
09-02-2008, 06:56 PM
Thanks for solving this problem guys! I've been trying for months. Only problem I still have is:

When you are one page one and you go to the lighbox viewere it only shows the images on the that page. Can I make it so lightbox will recognize all the pictures in the given directory as a group.

ie. Lets say i have a total of 24 pictures in a directory and i have 8 thumbnails on each page. The rel=lightbox[group1]

Right now: If you click the first image on page one it shows "1 of 8"
I want it to operate like: "1 of 24"

Any help is much appreciated

jscheuer1
09-05-2008, 07:02 AM
Thanks for solving this problem guys! I've been trying for months. Only problem I still have is:

When you are one page one and you go to the lighbox viewere it only shows the images on the that page. Can I make it so lightbox will recognize all the pictures in the given directory as a group.

ie. Lets say i have a total of 24 pictures in a directory and i have 8 thumbnails on each page. The rel=lightbox[group1]

Right now: If you click the first image on page one it shows "1 of 8"
I want it to operate like: "1 of 24"

Any help is much appreciated

This is a rather old thread, and lightbox 2 has been upgraded several times in the interim and browsers have changed a bit as well. As a result, the above solution is no longer optimal, even for single image enlargement, let alone for creating a grouping that spans two or more pages of PHP photo album.

I now favor a method that assigns the lightbox event directly to the thumbnail (in the PHP Photo Album script):


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" rel="lightbox[joe]" 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
}

And change this in the PHP Photo Album script:


function popuplinkfunc(imgsrc){
if (popupsetting[0]==1){
var popwin=open(imgsrc.href, "popwin", popupsetting[1])
popwin.focus()
return false
}
else
return true
}

to:


function popuplinkfunc(imgsrc){
myLightbox.start(imgsrc); return false;
}

To get multiple 'pages' of PHP album to be included in the lightbox next/previous array, code like this should be added to the PHP Photo Album script:


document.write('<div style="display:none;">');
for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
document.write('<a title="'+galleryarray[i_tem][0].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+targetlinkdir+galleryarray[i_tem][0]+'" rel="lightbox[joe]"></a>');
document.write('</div>');

just after the galleryarray has been sorted:


if (gsortorder=="asc" || gsortorder=="desc")
galleryarray.sort(sortbydate)

document.write('<div style="display:none;">');
for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
document.write('<a title="'+galleryarray[i_tem][0].replace(/^.*\/|\.[^\.]+$/g, '')+'" href="'+targetlinkdir+galleryarray[i_tem][0]+'" rel="lightbox[joe]"></a>');
document.write('</div>');

beans
01-24-2009, 11:19 PM
sorry if this thread should have died, but I don't quite understand. Total noob here. I successfully got the two scripts to merge, but I don't know how to make it so that the photos are a group so that you can scroll through them without having to click on and then close every picture. Help please?

page I'm testing it on can be found here (http://funknasty.net/funknasty2/photos.html)

also, anyway I can modify captions? I know how to do it if I wasn't using the getphotos script, but since that script is inserting the images for me, I don't know what I need to change. I also don't want the file name to show up, so please help.

edit: ok, I got grouping to work...any way to have multiple groupings or is it better if I just split the groups into different folders each with their own scripts? Lastly, how to I edit how the thumbnails show up on the page? I know how to change their size, but how do I get them center aligned, or other stuff like that.

jscheuer1
01-25-2009, 05:16 AM
Yes, old thread. I already pointed you in the right direction:


See:

http://www.dynamicdrive.com/forums/showpost.php?p=160300&postcount=5

If you have more questions, please start a new thread if you haven't already.