Results 1 to 3 of 3

Thread: Featured Image Zoomer MultiImage

  1. #1
    Join Date
    Sep 2014
    Location
    Singapore
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Featured Image Zoomer MultiImage

    Hi,

    I have 3 thumbnails at the bottom of the big image (see attachment). Zoom is working perfectly fine, what I am looking for is the when I move the mouse over on the thumbnail image, the big image should load. Currently it is on Click.

    Code:
    <script type="text/javascript">
    
    jQuery(document).ready(function($){
    	
    	$('#multizoom1').addimagezoom(
            { 
    		speed: 1500,
    		descpos: true,
    		imagevertcenter: true,
    		magvertcenter: true,
    		zoomrange: [3, 10],
    		magnifiersize: [250,250],
    		magnifierpos: 'right',
    		cursorshadecolor: '#fdffd5',
    		cursorshade: true
    	});
    })
    
    </script>
    HTML Code:
    <div class="targetarea" style="border:1px solid #eee">
           <img id="multizoom1" alt="zoomable" title="" src="img1.jpg"/>
    </div>
    
    <div class="multizoom1 thumbs">
          <a href="img1.jpg" data-large="img1.jpg" data-title=""><img src="img1.jpg" alt="img1" title=""/></a> 
          <a href="img2.jpg" data-large="img2.jpg" data-title=""><img src="img2.jpg" alt="img2" title=""/></a> 
          <a href="img3.jpg" data-large="img3.jpg" data-title=""><img src="img3.jpg" alt="" title=""/></a> 
    </div>

    Click image for larger version. 

Name:	Capture.jpg 
Views:	117 
Size:	8.5 KB 
ID:	5515

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Doing on mouse over what's normally done on click can sometimes give unexpected results, but not always. So it's worth a try. Add the highlighted as shown:

    Code:
    <script type="text/javascript">
    
    jQuery(document).ready(function($){
    	
    	$('#multizoom1').addimagezoom(
            { 
    		speed: 1500,
    		descpos: true,
    		imagevertcenter: true,
    		magvertcenter: true,
    		zoomrange: [3, 10],
    		magnifiersize: [250,250],
    		magnifierpos: 'right',
    		cursorshadecolor: '#fdffd5',
    		cursorshade: true
    	});
    
    	$('.multizoom1 a').mouseenter(function(){
    		$(this).trigger('click');
    	});
    })
    
    </script>
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    yashman (09-23-2014)

  4. #3
    Join Date
    Sep 2014
    Location
    Singapore
    Posts
    7
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default

    Thanks John, worked smoothly..

Similar Threads

  1. Featured Image Zoomer
    By vwphillips in forum Submit a DHTML or CSS code
    Replies: 14
    Last Post: 11-12-2012, 12:28 PM
  2. Featured Image Zoomer
    By fleance in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 04-26-2012, 12:02 AM
  3. Featured Image Zoomer how to hide
    By evanes in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 05-04-2011, 12:33 AM
  4. Resolved Featured Image Zoomer
    By jfrene in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-31-2010, 06:22 PM
  5. Problem with featured image zoomer
    By geoffloxton in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 07-21-2010, 10:59 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
  •