Photo Album/Image Thumbnail Viewer II/Light Box Combo

[vestagirl]

1) Script Title: Photo Album Script v2.0

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

3) Describe problem: I have a current page that I am working from that is using the Photo Album Script and the var Array section to pull photos from a database as the source. But I am looking for more of an arrangement of the images like in Image Thumbnail Viewer II, where it has one large image and the rest as thumbnails until they are clicked or moused over. I don't want to change to the Image Thumbnail Viewer II cause I lose my var Array area to find the photos. I also want to be able to click on the selected larger image to pop up larger like in the original Image Thumbnail Viewer. I want to be able to have the three different images by just using the one file as well.

I saw there was a post of combining Image Thumbnail Viewer with Photo Album but I dont believe that gives me the small thumbnails with the larger one to start and then goes the extra step to enlarge it again.

Any ideas would be most helpful!

Jolie

[ddadmin]

Well, it shouldn't be hard to have a larger image shown inline on the page when one of the thumbnails within Photo Album is clicked on, by using the thepics.onselectphoto event handler of the script. Getting them to show onMouseover is more tricky though. Assuming the former is fine, are you then asking how to integrate Image Thumbnail Viewer I (not II) to the enlarged image?

[vestagirl]

It is ok for it to show up on click instead of mouseover, however unless I am mistaken, the photo album only shows all images as the same size, I am looking for a layout which shows the clicked on image as a larger size next to the other thumbnails and also able to click on that featured image into a pop up window like in Thumbnail Viewer I. Thanks again for your help!

[ddadmin]

Sorry for the delay. Try the below.

First, when defining the images to be shown inside Photo Gallery script, define both the image's src parameter and link parameter (1st and 3rd) at the very least:


myvacation[0]=["photo1.jpg", "", "large1.jpg"]
myvacation[1]=["photo2.jpg", "", "large2.jpg"]
myvacation[2]=["photo3.jpg", "", "large3.jpg"]

Also add an arbitrary DIV like the below to the BODY section of your page:


<div id="enlargedarea"></div>

When a thumbnail is clicked on, it will load the initial image (ie: photo1.jpg) in the DIV above (id=enlargedimage) on the page. When that image is clicked on again, it will load the image specified in the link (ie large1.jpg) using Image Thumbnail Viewer.

So with the above done, install Image Thumbnail Viewer (http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm) on the same page as where your thumbnails are. You can skip Step 2 in the default instructions.

Finally, make use of the onphotoselect event handler at the end of the gallery's initialization code and containing the code shown:


myvacation[0]=["photo1.jpg", "", "large1.jpg"]
myvacation[1]=["photo2.jpg", "", "large2.jpg"]
myvacation[2]=["photo3.jpg", "", "large3.jpg"]
"
"
thepics.onselectphoto=function(img, link){
var enlargedarea=document.getElementById('enlargedarea')
enlargedarea.innerHTML='<a href="'+link.href+'" onClick="thumbnailviewer.stopanimation(); thumbnailviewer.loadimage(this); return false"><img src="'+img.src+'"/></a>'
return false
}

Let me know how this works for you.

[vestagirl]

That worked awesome! :) Thanks so much!