Thumbnail Viewer - Help with small changes

[rigbee]

1) Script Title: Image Thumbnail Viewer

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

3) Describe problem:

Not really a problem, but I have an idea of exactly how I'd like the viewer to work, and this involves:

1. A home image to open when the gallery is opened.

2. Additional controls at the bottom of the page to go to the NEXT or PREVIOUS image.

I have made a sample gallery at this link:

http://www.bookswapjapan.com/newtest3.html

I'd love to be able for one of the thumbnail images to appear when the page loads AND for the controls at the bottom to work.

Any help on this would really make my day.

Thanks - rigbee

[ddadmin]

It almost sounds like what you're asking is a way to associate the various thumbnails together as a collection. There's no quick way to do this right now with this script, but there are quite a few that do, such as:

Lightbox v2

Virtual Pagination script

[rigbee]

Is there really no way of making the next / previous buttons scroll through the images?

With Lightbox V2 is it possible to have the Previous/Next links BELOW rather than ON TOP OF the images?

Thanks - rigbee

[ddadmin]

Well, there's always a way in that sense, but what I mean is that there's no easy way to modify this script to do that at the moment. It would involve some rather extensive changes that I can only consider adding the next time this script is updated.

With Lightbox V2 is it possible to have the Previous/Next links BELOW rather than ON TOP OF the images?

If you mean move the "prev" and "next" buttons that show up when you hover over the enlarged image downward, sure, inside the .css file, you'll want to change the below two lines, specifically, the parts in red:

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

Change the 15% to a larger number like 65%.

[rigbee]

Thanks ddadmin.

I'm still a little stuck. What I'm coming down to is the one of the following:

1. Using Image Thumbnail Viewer IF I can have one of the gallery images load when the page loads.

2. Using Lightbox Image Viewer IF it is possible to disable the background going dark and simply having the image load in the middle of the screen.

Again, any help greatly appreciated - rigbee

[ddadmin]

Thanks ddadmin.

I'm still a little stuck. What I'm coming down to is the one of the following:

1. Using Image Thumbnail Viewer IF I can have one of the gallery images load when the page loads.

Again, any help greatly appreciated - rigbee

Sure, you can modify the Thumbnail Viewer script so a particular thumbnail link's image is enlarged and shown automatically when the page loads. First, inside the .js file, add the lines in red below to the original:

pagelinks[i].onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
if (pagelinks[i].getAttribute("rev")=="defaultload")
thumbnailviewer.loadimage(pagelinks[i])

Then on your page, for the thumbnail link in which you wish its enlarged image to show automatically (instead of via a click), add a "rev" attribute inside the link:

<p><a href="http://img184.imageshack.us/img184/1159/castleyi6.gif" rel="thumbnail" rev="defaultload" title="This is beautiful castle for sale!">Castle</a></p>

<p><a href="http://img201.imageshack.us/img201/6923/countryxb6.gif"" rel="thumbnail">Country</a></p>

[rigbee]

Thanks ddadmin - that worked like a charm. Nice one.