Adapting Image Thumbnail Viewer II

[Missy]

1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...thumbnail2.htm

3) Describe problem:

I am trying to create a gallery page using Image Thumbnail Viewer II ( ITVII ) where a viewer can change the thumbnails he has to choose from by activating different buttons. I was thinking that on a onClick event a variables value could be maniputaed. As I am working through the process, I find I can't come up with the proper syntax for using a variable in the <img src = " " comand. Can anyone show me how that script should be written?

Missy

[jscheuer1]

Something like so:

http://home.comcast.net/~jscheuer1/s...xbrowser_2.htm

?

[ddadmin]

Actually the best and most versatile solution is to define all your thumbnail links out in the plain, an use a script like Virtual Pagination to dynamically show/ hide a chunk at a time.

[ddadmin]

Wow and of course also check out what John just posted. Didn't see his reply in time.

[Missy]

Wow John, thats very close to what I have in mind.. I am going to start adapting it to my needs. Thank you so much for the post. I am sure I am going to have more questions as I go along.. should I keep the questions coming in this thread or a new one as its kinda a different set of code? in any case thank you very much for giving me a great start!

Missy

[jscheuer1]

This thread should be fine. The code is a combination and tweaking of Image thumbnail Viewer II, Ultimate Fade-in Slide Show and Photo Album script. I had this script laying around so, dusted it off and added a couple of things to make it just a little nicer. I thought it might be close to what you were looking for.

[Missy]

John, you are a wonderful genius, this is indeed getting close to what I have in mind. (After this project, I might want to talk to you about that world peace thing *giggles*.) What I want to be able to do is display the thumbnails over a background image. My original idea was to have the thumbnails displayed in a table via the <img scr ="" something like:

<td style="border-style: none; border-width: medium" width="126" align="center">&nbsp;<a href="#" onClick="return modifyimage('dynloadarea', 20)"><img src="m020.JPG" border="0" width="66" height="100"><a>

and have a picture of developed film negative as the tables background picture. Then changing the thumbnails that were shown by onClick events. I am open to other ideas on how to display the thumbnails over a background pic. If you can leave me the next crumb to follow on the trail to photo reviewing nirvana I would be very appreciative.

Missy

[jscheuer1]

There is something about the thumbnails I wanted to mention. I used the larger images, scaled down by the browser as the thumbnails. This was just a shortcut. It would be better to use actual thumbnail images.

To answer your question, I got a fairly good looking background-image for the thumbnails by using something like this in the style section:

#container { /*CSS for entire menu of thumbs*/
float:left;
width:300px;
text-align:center;
margin-right:45px;
padding:1em;
background:#cccccc url('background.jpg') center;
}

This replaced:

#container { /*CSS for entire menu of thumbs*/
float:left;
width:300px;
text-align:center;
padding-right:45px;
}

The background property may be set however you like, see:

http://www.blooberry.com/indexdot/cs...colorbg/bg.htm

or your favorite css reference for more information on the background property and its possible values.