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 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/cate...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.

  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

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

    Code:
    $('.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.
    - 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, it worked perfectly. Below is the code including the one you mentioned in the post

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

Similar Threads

  1. Featured Image Zoomer MultiImage
    By yashman in forum Dynamic Drive scripts help
    Replies: 4
    Last Post: 09-17-2014, 05:11 PM
  2. Featured Image Zoomer MultiImage
    By yashman in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 09-02-2014, 02:35 PM
  3. Featured Image Zoomer
    By vwphillips in forum Submit a DHTML or CSS code
    Replies: 14
    Last Post: 11-12-2012, 12:28 PM
  4. Featured Image Zoomer
    By fleance in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 04-26-2012, 12:02 AM
  5. Resolved Featured Image Zoomer
    By jfrene in forum Dynamic Drive scripts help
    Replies: 6
    Last Post: 07-31-2010, 06:22 PM

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
  •