Results 1 to 5 of 5

Thread: I need more than 4 thumbnails using demo3 Image Zoomer

  1. #1
    Join Date
    Apr 2013
    Location
    South Bend, IN USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question I need more than 4 thumbnails using demo3 Image Zoomer

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

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

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

    Code:
    .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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2013
    Location
    South Bend, IN USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,030
    Thanks
    44
    Thanked 3,211 Times in 3,173 Posts
    Blog Entries
    12

    Default

    Use this as your multizoom.css file:

    Code:
    .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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Apr 2013
    Location
    South Bend, IN USA
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks a million it works take a look.

    Ted

Similar Threads

  1. Featured Image Zoomer - Change Default loaded thumbnail image
    By coffee2020 in forum Dynamic Drive scripts help
    Replies: 17
    Last Post: 04-22-2013, 07:15 PM
  2. Featured Image Zoomer v1.5 &Image Thumbnail Viewer II
    By letom in forum Dynamic Drive scripts help
    Replies: 11
    Last Post: 07-09-2012, 06:44 PM
  3. Image Power Zoomer large image option IE 9 problem
    By fortwayne in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 11-29-2011, 01:10 AM
  4. image zoomer v1.5
    By mich0679 in forum JavaScript
    Replies: 1
    Last Post: 11-18-2011, 01:53 AM
  5. Image Power Zoomer problem on image src change
    By wally in forum Dynamic Drive scripts help
    Replies: 5
    Last Post: 07-11-2011, 07:42 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •