Featured Image Zoomer MultiImage

[yashman]

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.

<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>

<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>

[jscheuer1]

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:

<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>

[yashman]

Thanks John, worked smoothly..