PHP Photo Album + Lightbox Image Viewer

**Jalonis** · 06-05-2008, 04:38 PM

PHP Photo Album 2.0 + Lightbox Image Viewer 2.03a

Lightbox image viewer 2.03
Lightbox Image Viewer 2.03a

Photo Album script v2.0
Photo Album 2.0

First I would like to say that I love the scripts... However, I have spent nearly 2 days trying to track and find any information in the forums on how to merge the two with full functionality. So far to date, while the responses have all been great, and I have gotten the page to work for the most part, I can not get it to allow me to use lightbox fully.

For instance: I have php pulling the pictures from the thumbnail directory, then, when you click on the picture, I have lightbox working to show the picture. However, it will not allow me to set titles. If I add:
galleryarray[0]=["../thumb/photo1.jpg", "optional title", "optional description", "../full/photo1.jpg"]
(I did change the picture directions to the proper areas)
It won't load the pictures anymore. Just gives me a blank page with the text I put in.

What I am trying to do, is set it up so when I open lightbox, that lightbox will use the information for the picture selected, and show a title message, etc, like it says it will do, and have it set up for using the second version of lightbox, to show in the roadtrip style way for switching pictures.

What I do not know, and haven't been able to figure out, is how in the world to add it into the page.

My page I am using is: Link

I have seen other posts asking this question, but, somehow, the answer gets lost in the wording, or removed. Is there an easy way to get PHP to show the pictures, then, once you click on one, and it moves it to lightbox, to get lightbox to actually work using the roadtrip option, shown here:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

By putting those in, anywhere on the script for PHP, as I didn't see it say to put it in lightbox.js or anywhere else, and, since it's code pretty much means it's for setting up the images on the page, which PHP does automatically, it breaks the page. I have reverted the page back to working order, it does work, and will transition, however, I can not get it to use the lightbox[roadtrip] aspect at all.

Also, is there a way in lightbox, to restrict the size of the picture to defined max sizes? Some of the pictures get blown way out of proportion, and I just need them to be at a max size of about 600x500.

Help would seriously be appreciated!

Thanks!

**traq** · 06-05-2008, 06:21 PM

I think the easiest way to set a "title" for each picture would be to cheat and give each picture a "title" file name (I see on your page that the filenames are showing up in the lightbox viewer). I don't know enough about PHP to say how you might get actual titles and descriptions to be added dynamically.

Simple solution for the image size: just resize the image when adding it to your album directory (it looks like you are manually uploading the submissions to the album anyway...?).

BTW your links to the scripts are broken. Here are good ones.
Lightbox 2.03
Photo Album 2.0

edit/update:
You're trying to insert [roadtrip] in rel="lightbox" here, correct?

Code:

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][0].replace(/\.[^\.]*$/, '')+'" rel="lightbox" onclick="myLightbox.start(this);return false;">'
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
}

I combined these scripts recently, and my "buildimage" section looks like this:

Code:

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
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 />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

I'm going to try to add "roadtrip" to my version. I'll let you know how it works.

edit/update#2:
Okay, I tried it, looks like this now:

Code:

var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" rel="lightbox[roadtrip]" onClick="return popuplinkfunc(this)">'

Seems to work just fine. lightbox(roadtrip) album

**Jalonis** · 06-05-2008, 06:59 PM

Originally Posted by traq

I think the easiest way to set a "title" for each picture would be to cheat and give each picture a "title" file name (I see on your page that the filenames are showing up in the lightbox viewer). I don't know enough about PHP to say how you might get actual titles and descriptions to be added dynamically.

Simple solution for the image size: just resize the image when adding it to your album directory (it looks like you are manually uploading the submissions to the album anyway...?).

BTW your links to the scripts are broken. Here are good ones.
Lightbox 2.03
Photo Album 2.0

edit/update:
You're trying to insert [roadtrip] in rel="lightbox" here, correct?

Code:

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][0].replace(/\.[^\.]*$/, '')+'" rel="lightbox" onclick="myLightbox.start(this);return false;">'
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
}

I combined these scripts recently, and my "buildimage" section looks like this:

Code:

function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]
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 />'
tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

I'm going to try to add "roadtrip" to my version. I'll let you know how it works.

edit/update#2:
Okay, I tried it, looks like this now:

Code:

var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" rel="lightbox[roadtrip]" onClick="return popuplinkfunc(this)">'

Seems to work just fine. lightbox(roadtrip) album

Unfortunately, this still did not answer my questions. I have no idea where to put the code to add the files into the lightbox. As I check your site, I don't see them in there, so, since I can't see your .js files to see how you did it, I still am in the dark as to how you added the pictures to it in the first place, using the getpics.php script.

As for the pictures and resizing, the reason I ask, I have customers who love their pets, sending me varying size pictures, the only thing I do is resize them for thumbnails, and I leave the originals as is.

The original page I did, I used without lightbox, and it resized the pictures perfectly. Adding in the lightbox however, has made the pictures go out to max size with no control. That is what I am trying to change.

Thanks for responding so fast, unfortunately, not enough information was given for me to enable this. I am ok at programming, but, I'm still very new at this.

Thanks!!!

**traq** · 06-05-2008, 09:06 PM

I'm new at it also. I'm afraid I don't have a "real" answer for your question on how to add the titles and descriptions dynamically. Maybe someone else could help you, but that's the best I could do.

Same with the image resizing. I'm sure there's a way to do it via PHP, but since you're editing the images anyway (making the thumbnail, etc.) and uploading it yourself, I just figured it'd be a simple way to do what you want without much extra work. edit: have you looked into getting a batch converter, like this one maybe? could make image resizing work go faster.

As far as the code for my album goes, I didn't alter the .js files in any way. The only changes I made are those I showed you in the <body> of the page. Here is the thread I posted; it shows everything I did.

Let me know exactly what you're not clear on and I'll do my best. Maybe someone else can help us out too.

**Jalonis** · 06-05-2008, 09:31 PM

I wanted to thank Traq for his/her help today, it did lead me towards the right goal. I had to cheat a little, and download all the files off their site to find out how they did it.

It was the getpics.php file that was the culprit, as well as the rest. I didn't know I had to literally kill the script for getpics.php, and replace it with a defined version instead.

I did so, and used the code on their page to get mine to work, and so far, it appears to be working!!! However, I can't seem to get the description I defined to show up at the bottom, nor can I resize it.

I'll post the progression of what I have done to the pages here:
Current page w/o lightbox
Lightbox w/o roadtrip working
Lightbox with roadtrip working, no resize or caption inside lightbox

If you go to the original page, and click on one of the pets pictures, you will see that it sizes them to a default size, even the big pictures. Click on any, you'll see they shrink if too big, using javascript.

However, when you go to the lightbox pages, and click on some of them, it will jack up the screen and force you to have to scroll to get to the others, or the bottom.

Keep in mind, the third attempt, won't have all the pictures showing for the lightbox, as I made that a test page.

I am also trying to get the description I was able to get to show when you mouse over the pictures on the third test page, to show at the bottom of the lightbox when you go into the roadtrip feature, anyone have any ideas what you need to change in lightbox.js to facilitate that?

I attempted to change some, or add some stuff to the lines:
//
// updateDetails()
// Display caption, image number, and bottom nav.
//
updateDetails: function() {

Element.show('caption');
Element.setInnerHTML( 'caption', imageArray[activeImage][1]);

// if image is part of set display 'Image x of x'
if(imageArray.length > 1){
Element.show('numberDisplay');
Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length); <-- here is where I tried to change -->
}

However, I can't seem to add anything extra onto the end of imageArray.length, and you can see on the third page once you click on the picture, that is does put image # of # at the bottom of it, and the code above shows just that, however, I can't get it to append the caption I put into the page itself after that, would really appreciate it if someone could point me in the right direction there.

Also, one more quick question about it, the bottom page definately shows 2 pages of pictures, and if I click on the second page, it will open a whole new lightbox section, however, the two do not tie together. Is there any way that if you open a picture, and lightbox is working, that it can go the whole spectrum of pictures, instead of just the page your on?

Thanks!!!

Also thanks again for all the help Traq!!!

**traq** · 06-06-2008, 01:48 AM

it's "him."

and it's no problem that you had a look at the files. However, I don't know what you mean about getpics.php - I didn't change anything in it. I'd never even opened it and had a look, it is just as it came off DD.

Anyway, I'm glad I could help. But we have officially reached the limit of what I can do for you, so, good luck!

**Jalonis** · 06-06-2008, 02:08 PM

Well, thanks anyways, I fixed the sizing problem to date, by resizing them to a uniform size instead. Was hoping to make the program do it itself, to keep the integrity of the pictures, but, this works as well.

As for the getpics.php, I'll show you my version, vs your version:

Your version with my picture information::

Code:

var galleryarray=new Array();
galleryarray[0]=["wagleytimmytommypet.jpg", "May 13, 2008 09:40:47", "Wagley's Pets Timmy and Tommy"];
galleryarray[1]=["kellydobiepet.jpg", "Jun 04, 2008 09:04:47", "Kelly's Pet Dobie"];
galleryarray[2]=["dailchloe2pet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Chloe Picture 2"];
galleryarray[3]=["dailbetsy3pet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Betsy Picture 3"];
galleryarray[4]=["dailbetsy2pet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Betsy Picture 2"];
galleryarray[5]=["dailearlgertrudepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pets Earl and Gertrude"];
galleryarray[6]=["dailgypsyrose2pet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Gypsy Rose Picture 2"];
galleryarray[7]=["dailgagitpet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Gagit"];
galleryarray[8]=["dailchloecharliepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pets Chloe and Charlie"];
galleryarray[9]=["dailgertrude2pet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Gertrude Picture 2"];
galleryarray[10]=["dailgypsyrosepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Gypsy Rose"];
galleryarray[11]=["dailmaggiepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Maggie"];
galleryarray[12]=["dailgertrudepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Gertrude"];
galleryarray[13]=["dailcharliepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Charlie"];
galleryarray[14]=["suittearlcharliepet.jpg", "Jun 04, 2008 09:04:47", "Suitt's Pets Earl and Charlie"];
galleryarray[15]=["dailchloemaggiepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pets Chloe and Maggie"];
galleryarray[16]=["dailchloepet.jpg", "Jun 04, 2008 09:04:47", "Dail's Pet Chloe"];
galleryarray[17]=["dailjkpet.jpg", "Apr 27, 2008 01:02:47", "Dail's Pet Jk"];
galleryarray[18]=["dailbetsypet.jpg", "Apr 27, 2008 01:03:47", "Dail's Pet Betsy"];
galleryarray[19]=["jamiepet.jpg", "Jun 04, 2008 09:04:47", "Jamie's Pet"];
galleryarray[20]=["jscharboroughmaggiepet.jpg", "Jun 04, 2008 09:04:47", "Uncle Joe's Pet Maggie"];
galleryarray[21]=["mileymay08.jpg", "May 01, 2008 09:04:47", "Cindy's Pet Miley"];
galleryarray[22]=["ellisonflossiepet.jpg", "Oct 02, 2005 04:41:00", "Ellison's Pet Flossie"];
galleryarray[23]=["miley06-05-08.jpg", "Jun 05, 2008 00:00:00", "Miley wants to help you!"];

The version I had which came with PHP Photo::

Code:

<?php
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();
?>

As you can see, vastly different! =)

And, I did not download the getpics.php from lightbox, as I had that one, and did not realize they were different setups.

So, to date, if anyone can help me with the changing of the image # of # function inside of lightbox.js, that is about the only thing I still need help with on this currently.

Many thanks for the help Traq, appreciate it!

**traq** · 06-06-2008, 02:46 PM

I see what you mean. That's what getpics.php looks like after it's done it's work getting all the images from the directory. I didn't have to write it like that -that would kinda defeat the purpose of being a dynamically generated gallery! Uploaded on the server, before the album calls it, it looks exactly like yours. (Or at least, that's how I figure it works. Something to do with that last line, "echo "var galleryarray=new Array();" . "\n"; returnimages();" I think.)

(I didn't download getpics.php from lightbox either, sorry for the confusion.)

**Jalonis** · 06-06-2008, 04:29 PM

Hmm... I had to replace getpics.php that I had with what yours showed, mine never generated a script like yours to work, it stayed like what I had... interesting, wonder why that is? It worked great for just PHP Photo, but, when I introduced lightbox into the script with PHP, it balked.

Ok, so, what I need, if anyone is able to help me out here, is first, a reason why I have to manually code the getpics.php file for lightbox to work right, and why getpics.php of my version won't do what it should?

I also still need to know how to add on the extra element to the lightbox, the thumb nails provided by PHP Photo works great when you mouse over it, it gives you the info and the date of the file, but, I can't get lightbox to use that, and having to hard code the file which shouldn't need to happen, is horrible.

Thanks!