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>



5515

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