Advanced Search

Results 1 to 6 of 6

Thread: Image Power Zoomer problem on image src change

  1. #1
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image Power Zoomer problem on image src change

    1) Script Title: Image Power Zoomer v1.1

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...owerzoomer.htm

    3) Describe problem:
    Hi, I use the power zoomer script in an image gallery. So I have an img that display the image selected from the thumbnails. The problem is that when I change the img src, some times the lens displays still the first image.

    Here a part of my html code:

    Code:
        		<div id="framework">
    	        <div id='zoom1'>
    		    		<div id="preloader">
    		    			<img src="images/loader.gif" />
    		    			<span>Caricamento in corso...</span>
    		    		</div>
    
    	          <img src="" alt='' title="Usa la rotella del mouse per variare lo zoom. Doppio click per aprirla." align="center" />
    	          <script> <!-- this is only an useless attempt. playSource is called by the body onload event -->
    	          	function playSource()
    	          	{
    		          	var iPath = 'images/dojo/gallery/DSC02021.jpg';
    		          	setTimeout(function(){setSource(iPath);}, 1000);
    	          	}
    	          </script>
    	        </div>
    	
    	        <div class="jMyCarousel"> <!-- thumbnails -->
    	        		<img id="thHeader" src="images/header_thumbs.png" />
    					    <ul>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02021.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02022.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02023.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02024.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02025.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02026.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02027.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02028.jpg" ></a></li>
    					        <li><a href="#" onclick="setSource(this);"><img src="images/dojo/gallery/thumb/DSC02029.jpg" ></a></li>
    						  </ul>
    					</div>
          	</div>
    and here the setSource function:

    Code:
    function setSource(sender)
    {
    	if (sender != null)
    	{
    		var src;
    		if (typeof sender == 'string')
    			src = sender;
    		else
    			src = sender.firstChild.src.replace('/thumb', '');
    		
    		var $img = $('#zoom1 > img');
    		$img.attr('src', src);
    		setAspectRatio();
    
    		//the following two lines are an useless attempt to solve the problem
    		ddpowerzoomer.$magnifier.inner.find('img').attr('src', '');
    		ddpowerzoomer.$magnifier.inner.html('');
    		
    		$img.addpowerzoom({
    				defaultpower: 2,
    				powerrange: [2,7],
    				largeimage: src,  //can be null
    				magnifiersize: [200,200] //<--no comma following last option!
    		})
    		//ddpowerzoomer.$magnifier.image.attr('src', src);
    	}
    }
    Last edited by jscheuer1; 07-08-2011 at 03:06 PM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    I'd try:

    Code:
    ddpowerzoomer.$magnifier.outer.remove();
    ddpowerzoomer.init(jQuery);
    in place of:

    Code:
    		//the following two lines are an useless attempt to solve the problem
    		ddpowerzoomer.$magnifier.inner.find('img').attr('src', '');
    		ddpowerzoomer.$magnifier.inner.html('');
    And here in the script, add the highlighted:

    Code:
    jQuery.fn.addpowerzoom=function(options){
    	var $=jQuery
    	return this.each(function(){ //return jQuery obj
    		if (this.tagName!="IMG")
    			return true //skip to next matched element
    		if (typeof options=="undefined")
    			options={}
    		if (options.largeimage && options.largeimage.length>0){ //preload large image?
    			options.preloadimg=new Image()
    			options.preloadimg.src=options.largeimage
    		}
    		var $imgref=$(this).unbind();
    		options.largeimagesrc=(options.preloadimg)? options.preloadimg.src : $imgref.attr('src')
    		if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined
    			ddpowerzoomer.setupimage($, this, options)
    		else if (this.complete){ //account for IE not firing image.onload
    			ddpowerzoomer.setupimage($, this, options)
    		}
    		else{
    			$imgref.bind('load', function(){
    				ddpowerzoomer.setupimage($, this, options)
    			})
    		}
    	})
    }
    If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    Last edited by jscheuer1; 07-08-2011 at 06:04 PM. Reason: add twek for script
    - John
    ________________________

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

  3. #3
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi,
    thank you a lot for your answer.
    As you suggest, I changed my SetSource function as follow:


    Code:
    function setSource(sender)
    {
    	if (sender != null)
    	{
    		var src;
    		if (typeof sender == 'string')
    			src = sender;
    		else
    			src = sender.firstChild.src.replace('/thumb', '');
    		
    		var $img = $('#zoom1 > img');
    		$img.attr('src', src);
    		setAspectRatio();
    
    		ddpowerzoomer.$magnifier.outer.remove();
    		ddpowerzoomer.init($img);
    		
    		
    		$img.addpowerzoom({
    				defaultpower: 2,
    				powerrange: [2,7],
    				largeimage: src,  //can be null
    				magnifiersize: [200,200] //<--no comma following last option!
    		})
    	}
    }
    But now it does not works the lens does not appear more!


    You can find the website (without the above modify), at http://www.teambudoryunosi.it in the top menu select DOJO and then FOTOGRAFIE. Just in this moment the site is offline, I don't know because, but it's on an economic ISP.

    In the photogallery page, move the mousepointer on the bottom bar of the picture to see the thumbnails.

    Thank you again! ;-)

  4. #4
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey!!!
    ...I tried to restore the original version of SetSource but keeping the modified version of your script with the added unbind() call, and now...
    ...IT WORKS FINE!!!!!!!!!!!!!!!!!!!!!

    Thank you very very very very very much!!!!
    I was fighting with this problem by 2 months!!!
    Now it works!!! GREAT!!!

    THANKS THANKS THANKS

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,684
    Thanks
    43
    Thanked 3,128 Times in 3,094 Posts
    Blog Entries
    12

    Default

    That should be:

    Code:
    ddpowerzoomer.$magnifier.outer.remove();
    ddpowerzoomer.init(jQuery);
    not:

    Code:
    		ddpowerzoomer.$magnifier.outer.remove();
    		ddpowerzoomer.init($img);
    nor:

    Code:
    ddpowerzoomer.$magnifier.outer.remove();
    ddpowerzoomer.init(jQuery));
    as I had it originally (fixed now in my previous post, it was a cut and paste typo, that extra closing parenthesis).

    It won't work without jQuery in there. What it does is completely destroy the magnifier and all events associated with it and its contents, and rebuilds it. It cannot rebuild it without jQuery as a parameter.

    But from what you say, the unbind() was all that was required. I added that as an afterthought, thinking when I saw it that we might as well get rid of the old events for the image before assigning new ones to it.
    Last edited by jscheuer1; 07-08-2011 at 06:08 PM. Reason: saw typo
    - John
    ________________________

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

  6. #6
    Join Date
    Jul 2011
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hi, john
    as you wrote, the unbind() call was sufficient to let it works fine. How ever I just added the two lines of code you suggest me, and with the last correction it's all ok!
    I want to thank you again for your very very very precious help!

    bye

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
  •