PDA

View Full Version : Adapting Image Thumbnail Viewer II



Missy
02-06-2007, 06:38 PM
1) Script Title: Image Thumbnail Viewer II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/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
02-06-2007, 10:21 PM
Something like so:

http://home.comcast.net/~jscheuer1/side/files/album_xbrowser_2.htm

?

ddadmin
02-06-2007, 10:28 PM
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 (http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm) to dynamically show/ hide a chunk at a time.

ddadmin
02-06-2007, 10:30 PM
Wow and of course also check out what John just posted. :D Didn't see his reply in time.

Missy
02-07-2007, 05:36 AM
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
02-07-2007, 06:23 AM
This thread should be fine. The code is a combination and tweaking of Image thumbnail Viewer II (http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm), Ultimate Fade-in Slide Show (http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm) and Photo Album script (http://www.dynamicdrive.com/dynamicindex4/photoalbum.htm). 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
02-07-2007, 06:56 PM
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
02-07-2007, 10:11 PM
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/css/properties/colorbg/bg.htm

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