Featured Image Zoomer MultiImage

[yashman]

Hi,

I have the multizoom image, everything is working except the below issue. To replicate the issue, please use the below step

Step 1: Visit this URL : http://www.blissflowsystems.com/category.asp?c=SG&cid=10&sq=1 and then roll over your mouse on the image. Now
Step 2: From the Accordion on the left, expand "Temperature Gauge", then roll over the mouse on the image loaded to see the Zoom. Roll over the mouse above where the picture actually starts

Issue: When another Sub Category is loaded through accordion using AJAX call, the previous Zoom Image placeholder is not refreshed automatically and it shows previous category image in the Zoom view.

[jscheuer1]

You need to clean up the old multizoom elements and their events prior to loading the new one. That can be done with:


$('.magnifyarea, .cursorshade, .zoomstatus, .zoomtracker').remove();

I'm not sure where the best place to do that is (I don't see what code is responsible for the AJAX import), it would be right before you load in the new content via AJAX. Or another way to describe where to put this code would be the click event of the Temperature Gauge and similar elements, either before it triggers the AJAX function, or even better if this works - as the first thing in the success or similar function of the AJAX call.

The browser's cache may have to be cleared and/or the page refreshed to see changes.

If you want more help, please point out to me what code is handling the click event on the Temperature Gauge element.

[yashman]

Thanks John, it worked perfectly. Below is the code including the one you mentioned in the post



<script type="text/javascript">
$(document).ready(function()
{
$('.magnifyarea, .cursorshade, .zoomstatus, .zoomtracker').remove();

$('#multizoom1').addimagezoom(
{
speed: 1500,
imagevertcenter: true,
magvertcenter: true,
zoomrange: [2, 6],
magnifiersize: [250,250],
magnifierpos: 'left',
cursorshadecolor: '#fdffd5',
cursorshade: true
});

$('.multizoom1 a').mouseenter(function()
{
$(this).trigger('click');
});
});
</script>