PDA

View Full Version : Resolved 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 (http://www.dynamicdrive.com/dynamicindex4/lightbox2/lightbox.htm)

Photo Album script v2.0
Photo Album 2.0 (http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm)


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 (http://www.cconnect.net/ccipets2.html)


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 (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm)
Photo Album 2.0 (http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm)

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

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:

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:

var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" rel="lightbox[roadtrip]" onClick="return popuplinkfunc(this)">'
Seems to work just fine. lightbox(roadtrip) album (http://sandbox.arrowheadsps.org/getpic_lightbox/album2.htm)

Jalonis
06-05-2008, 06:59 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 (http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm)
Photo Album 2.0 (http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm)

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

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:

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:

var tempcontainer='<a href="'+imagecompletepath+'" target="'+href_target+'" rel="lightbox[roadtrip]" onClick="return popuplinkfunc(this)">'
Seems to work just fine. lightbox(roadtrip) album (http://sandbox.arrowheadsps.org/getpic_lightbox/album2.htm)
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 (http://www.batchconverter.com) 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 (http://www.dynamicdrive.com/forums/showthread.php?t=33045) 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 (http://www.cconnect.net/ccipets.html)
Lightbox w/o roadtrip working (http://www.cconnect.net/ccipets2.html)
Lightbox with roadtrip working, no resize or caption inside lightbox (http://www.cconnect.net/ccipets3.html)

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::


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::


<?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!

Jalonis
06-09-2008, 08:56 PM
No one able to help on this issue? See above, would really appreciate some help with this, thanks!

jscheuer1
06-26-2008, 03:18 PM
You've got so much going on here, what you are trying to do, it's bound to get confusing. But it can be done, there are several parts. Starting over with a fresh version of both scripts, but using traq's getpics, we can safely do:


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

But to get the multi image functionality to really work, we need to have all of the images setup on the page, preferably in a section that the user doesn't see. To that end, we want to place a division with display:none as the first thing after the opening body tag:


<body . . .>
<div id="lightbox_reserve" style="display:none;"></div>

Once we have that, our buildimage function should look like so:


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0];
var lblk = document.createElement('a');
lblk.rel = 'lightbox[roadtrip]';
lblk.href = imagecompletepath;
lblk.title = galleryarray[i][2];
document.getElementById('lightbox_reserve').appendChild(lblk);
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][2]+'" rel="lightbox[roadtrip]" 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
}

This will put 'permanent' lightbox type links for each of the images with their titles in the unseen division before lightbox initializes. Whenever one of these images is launched from the PHP script display (which only makes temporary links if you are paging through a gallery with it), it will be skipped by the lightbox remove dupes function, and the 'permanent' one we already made will be used instead, preserving the order and continuity of the entire group.

Jalonis
06-27-2008, 01:33 PM
I tried what you stated, first off, you have two different versions of the same function, both different, I replaced it the first time, then the second time, and no go. It errors out. So, I removed it all, and put it back the way I had it, and it works. Something is not right in the syntax, and as I have no clue what you tried doing in the first place, I can't even consider saying what =)

I'll leave it in as you specified, and you can check it yourself, it'll be the same path directory, but, as ccipets4.html instead.

Thanks for your help!

jscheuer1
06-27-2008, 02:22 PM
You have:


function buildimage(i){ var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0]; var lblk = document.createElement('a'); lblk.rel = 'lightbox[roadtrip]'; lblk.href = imagecompletepath; lblk.title = galleryarray[i][2]; document.getElementById('lightbox_reserve').appendChild(lblk); var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][2]+'" rel="lightbox[roadtrip]" 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 }

You should have:


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0];
var lblk = document.createElement('a');
lblk.rel = 'lightbox[roadtrip]';
lblk.href = imagecompletepath;
lblk.title = galleryarray[i][2];
document.getElementById('lightbox_reserve').appendChild(lblk);
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][2]+'" rel="lightbox[roadtrip]" 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
}

There are other problems with the page, it is invalid (not to specification), but these may or may not be causing problems in all or even most browsers, they still should be corrected. However, the code you copied from my post, you got it wrong, and that definitely breaks the script. I will try mocking up your page locally to see if that is the only problem.

Added Later:

That seemed to be the only major problem at least. However, where you have:


<div id="navlinks">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ')
document.getElementById("navlink1").className="current"
</script>
</div>

Even though it is what it is supposed to be, your page is not finding document.getElementById("navlink1") so change it to:


<div id="navlinks">
<script type="text/javascript">
for (i=1; i<Math.ceil(galleryarray.length/totalslots)+1; i++)
if(i==1)
document.write('<a class="current" id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ');
else
document.write('<a id="navlink'+i+'" href="javascript:jumptopage('+i+')\">Page'+i+'</a> ');
</script>
</div>

I can only guess that there is too much else going on for the browser to recognise the written link in time to access it so quickly.

Jalonis
06-27-2008, 03:43 PM
Well, I tried and replaced what you put in, and it still doesn't work, yet, it works fine before the changes, as evidenced in ccipets3.html. I keep getting errors, and seriously do not know what to do.

I followed your directions again, using cut and paste, so, any errors were in the syntax already put on the page, and, it won't even show it.

Thanks for helping me though, would truely love to get this working!

jscheuer1
06-27-2008, 05:34 PM
Don't give up. You are still dropping line breaks. You are getting better though. Now it's just that where you have:


tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : "" return tempcontainer }

It should be (as I've had it all along):


tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : ""
return tempcontainer
}

But let's make it:


tempcontainer+=(descriptionprefix[0]==1)? descriptionprefix[1]+(i+1) : "";
return tempcontainer;
}

That way, even without the line breaks it will be valid.

Incidentally, in the Opera browser, the script parser error corrects that line and it does work. And the whole thing (written my original way) was working here cross browser in a local copy of your page.

Jalonis
06-27-2008, 06:46 PM
Awesome, that worked great, however, it did take off the name of the pet in the getpics part, and, I am not able to use just the getpics.php file, I have to manually set it up, but, I guess that's a small price to pay to get all this working.

How would I get the title back of the pet on the main, instead of the photo1 photo2, etc?

Thanks!!!

Jalonis
06-27-2008, 07:07 PM
Oops, hate to be a bother still, but, not sure what is causing #12's picture, and #24's picture to use the title path of the picture, and not the defined name I set up in it.

However, this only happens if you click on them singly or cycle through them on the page your currently on, and when it's the last one shown in the group, but, not when you go in through another page, so, say, if I am on page 1, #12 will be wrong, if I am on page 2, #24 will be wrong, and the only ones wrong will be the very last file of the page you are located on when you start it.

Thanks again for your help, I really do appreciate it!!!

jscheuer1
06-28-2008, 04:06 AM
Sorry, I didn't realize the full extent of your modifications to getpics2. This can be worked out. Here is another revised version of the buildimage function that takes fuller advantage of your getpics2 file:


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0];
var lblk = document.createElement('a');
lblk.rel = 'lightbox[roadtrip]';
lblk.href = imagecompletepath;
lblk.title = galleryarray[i][3];
document.getElementById('lightbox_reserve').appendChild(lblk);
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][3]+'" rel="lightbox[roadtrip]" onclick="myLightbox.start(this);return false;">';
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][3]+'" >';
tempcontainer+='</a><br >';
tempcontainer+=galleryarray[i][2];
return tempcontainer;
}

Additional tweaking is possible, like if you wanted to use the file date somewhere (I left it out because it usually only shows the date the image was uploaded to the server, and so isn't particularly informative), or wanted the data from getpics2 used slightly differently than what I've done in the above function. Let me know.

As a side note, is your getpics2 still a PHP generated file? If so, I'd love to see its source code.

Jalonis
06-28-2008, 01:47 PM
Great! Almost perfect, unfortunately, it's now pulling the name of the file not the name of the pet in the lightbox, but, the rest is beautiful.

As for the script, no, I didn't get it working, I had to manually hard code the file to get that to work.

Seems that getpics.php can be done either way, I just haven't figured out how to make the auto file pull the information, since there are alot of missing variables in the pictures themselves, that throw the check for a loop.

So by taking use of the getpics.php check in java, I saw how the format was to be returned, and added the extra columns of information and set up a file manually for that.

Thanks again for your help!

jscheuer1
06-28-2008, 01:56 PM
it's now pulling the name of the file not the name of the pet in the lightbox, but, the rest is beautiful.

I see this (for example) in the lightbox for Milely:


Miley wants to help you!
Image 1 of 24

That's not the filename. The filename is:

miley06-05-08.jpg

What would you want it to say in the lightbox for 'ol Miley there?

Jalonis
06-29-2008, 04:22 AM
I had just the name of the pets showing in the lightbox, just like it is now doing in the pictures underneath, rather than the photo 1. On mouse over, you saw the Miley wants to help you. line, and the file's actual full path was to only be there to see the picture.

So, to be sure you know what I was hoping for, when you first go to the page, you see the name of the pet(s) under the picture, and due to size restrictions, I kept their names small, that same name on the thumbnails, is the name I'd like to have on the lightbox in bigger mode, however, when you mouse over the thumbnails, it should show the optional title I put up there so you could know who's pet it was.

If that's possible, that'd be outstanding =)

Thanks for your help, seriously!

jscheuer1
06-29-2008, 12:44 PM
Got it. I thought that was what you meant, but wasn't 100% sure. Only two small changes required (both highlighted and red):


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0];
var lblk = document.createElement('a');
lblk.rel = 'lightbox[roadtrip]';
lblk.href = imagecompletepath;
lblk.title = galleryarray[i][2];
document.getElementById('lightbox_reserve').appendChild(lblk);
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][2]+'" rel="lightbox[roadtrip]" onclick="myLightbox.start(this);return false;">';
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][3]+'" >';
tempcontainer+='</a><br >';
tempcontainer+=galleryarray[i][2];
return tempcontainer;
}

By the way, not all browsers are picking up on your style for the text displayed under each thumbnail. In FF for example, it is red normal weight serif (Times New Roman).

To fix that, add (highlighted) to your on page stylesheet:


.slideshow{ /*CSS for DIV containing each image*/
float: left;
margin-right: 10px;
margin-bottom: 10px;
color:#fff;
font:700 14px arial, helvetica, sans-serif;
}

One other small problem where style is being lost is here (from your source code):


. . . <span id="cipher"><input type="checkbox" name="xcipher" value="1" ><span class="style20">Encrypted login</span>
<input type="hidden" name="uid" value="47bae62bbef991203430956">
<input type="hidden" name="mdpass" value="">
</td>
</tr>


<span class="style24"><script language="JavaScript" src="javascripts/jscalendar.js"></script></span>
<!-- Content area, delete anything below this comment and add your content below -->
<table width="100%" cellpadding="2" cellspacing="2" border="0">
<tr>
<tr valign="top"><BR><BR>
<span class="style24"><center>Carolina Connections Staff and Customers Pet Page!</center><span class="style22"><br><br>
<p>This is a collection of some of our customers favorite pets, as well as our employees, feel free to send your pet pictures to mypets@cconnect.net if you want them . . .

Since the specification doesn't allow a span here, FF (probably others) aren't adding the style24 rules to the date generated by that script. To fix that, use a division and move it to here:


. . . <form name="login" method="post" action="http://208.11.185.131:32000/mail/login.html" onsubmit="sha1submit()">
<div class="style24"><script language="JavaScript" src="javascripts/jscalendar.js"></script></div>

<table width="100%">

<td width="62"><span class="style22">Icewarp Login :</sp . . .

Doing this will not change the layout, but will fix the problem with the style not being used by some browsers.

Jalonis
06-30-2008, 12:34 AM
Awesome, I will add those in tomorrow, and thank you very very much!!

Jalonis
06-30-2008, 01:10 PM
Great, I added it in, it's all working, except that one problem I mentioned before, not sure why, but, the last group selection on the current page you start on, be it 1 or 2, always shows the filename of the picture, and not the generated pet name.

Not sure why this is happening, but, if you go to the page, and click on the #12 picture, it will come up as dailpetmaggie instead of just maggie.

Any ideas what could be causing this? Other than that, it's working perfectly, and I effected those changes you mentioned as well, thanks again!

jscheuer1
06-30-2008, 02:53 PM
I hadn't realized that you were already using a modified PHP gallery script. But let's go with it. Replace this:


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[roadtrip]"></a>'); document.write('</div>');

with:


document.write('<div style="display:none;">');
for (var i_tem = 0; i_tem < galleryarray.length; i_tem++)
document.write('<a title="'+galleryarray[i_tem][2]+'" href="'+(targetlinkdir!=""? targetlinkdir : imagepath)+galleryarray[i_tem][0]+'" rel="lightbox[roadtrip]"></a>');
document.write('</div>');

and get rid of this (highlighted):


function buildimage(i){
var imagecompletepath=(targetlinkdir!="")? targetlinkdir+galleryarray[i][0] : imagepath+galleryarray[i][0];
var lblk = document.createElement('a');
lblk.rel = 'lightbox[roadtrip]';
lblk.href = imagecompletepath;
lblk.title = galleryarray[i][2];
document.getElementById('lightbox_reserve').appendChild(lblk);
var tempcontainer='<a href="'+imagecompletepath+'" title="'+galleryarray[i][2]+'" rel="lightbox[roadtrip]" onclick="myLightbox.start(this);return false;">';
tempcontainer+='<img src="'+imagepath+galleryarray[i][0]+'" title="'+galleryarray[i][3]+'" >';
tempcontainer+='</a><br >';
tempcontainer+=galleryarray[i][2];
return tempcontainer;
}

and get rid of this:


<div id="lightbox_reserve" style="display:none;"></div>

Jalonis
06-30-2008, 03:53 PM
Awesome!!! It's working 100%, thank you very very much! :)