I need more than 4 thumbnails using demo3 Image Zoomer

[TedK]

1) Script Title: :: Featured Image Zoomer (now w/Multi-Zoom) v2.1

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

3) Describe problem: I want to add more than four thumbnails; I am using Demo 3 code.
When I do add more they go to a different line and do not work properly.
How do I do this?

http://aasupport.com/Rabone/test.htm

Ted

[jscheuer1]

Use the multizoom.css file. That's what it's for. For example (additions/changes highlighted):


.magnifyarea { /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

.targetarea { /* CSS for container div(s) of the zoomable image */
width: 547px; /* wide or wider than the widest zoomable image */
margin: auto;
margin-top:3px;
}

#two { /* Added CSS for second target div of zoomable images */
height: 243px; /* high or higher than the tallest zoomable image */
}

.targetarea img { /* zoomable image */
margin: auto; /* for horizontal centering */
display: block; /* also for horizontal centering */
position: relative; /* along with on the fly calculations in script, for vertical centering */
border-width: 0;
}

.thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
padding-top: 25px;
text-align: center;
}

Notes I removed the height from the target area to allow it to be the height of the image within it and set its width to that of the zoomable (mid-sized) images and gave it an auto margin which will center it on the page. I removed the width from the .thumbs container div to allow the thumbnail images to spread out.

[TedK]

Thank you for your help but how do I control the space between the thumbnails and the main graphic.
I want to have up to 12 thumbnails so how do I have two rows of 6 and the thumnails not wider then the main graphic.
http://www.aasupport.com/Rabone/test.htm

Ted

[jscheuer1]

Use this as your multizoom.css file:


.magnifyarea { /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

.targetarea { /* CSS for container div(s) of the zoomable image */
width: 547px; /* wide or wider than the widest zoomable image */
height: 444px; /* high or higher than the tallest zoomable image */
margin: auto;
margin-top:3px;
}

.targetarea img { /* zoomable image */
margin: auto; /* for horizontal centering */
display: block; /* also for horizontal centering */
position: relative; /* along with on the fly calculations in script, for vertical centering */
border-width: 0;
}

.thumbs { /* divs holding the trigger links - styles optional, used here to center their links below their respective zoomable image */
padding-top: 20px;
text-align: center;
width: 547px;
margin: auto;
}

.thumbs a { /* trigger links on the thumbnail images */
text-decoration: none; /* avoid underlines of images, text or spaces in these links */
}

.thumbs img { /* trigger images - the thumbnails used to load new zoomable images into the targetarea */
border-width: 0; /* avoid default borders in some browsers */
margin-top: 4px;
}

#description, #description2 {
position: absolute; /* required for description folows image bottom (descpos: true) */
width: 325px; /* should be width of zoomable image container (.targetarea) */
text-align: center;
font: bold 95% sans-serif;
margin-top: 3px; /* when following image bottom, this sets a fixed distance for that */
color: #222;
background-color: #fff;
}

If you want to change other things later, or if the size of your images change, you might want to change the css again. For the most part this is just normal css, so you can consult a css reference for more information.

[TedK]

Thanks a million it works take a look.

Ted