Image Power Zoomer problem on image src change

[wally]

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:

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

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);
	}
}

[jscheuer1]

I'd try:

ddpowerzoomer.$magnifier.outer.remove();
ddpowerzoomer.init(jQuery);

in place of:

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

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.

[wally]

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

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! ;-)

[wally]

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

[jscheuer1]

That should be:

ddpowerzoomer.$magnifier.outer.remove();
ddpowerzoomer.init(jQuery);

not:

		ddpowerzoomer.$magnifier.outer.remove();
		ddpowerzoomer.init($img);

nor:

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.

[wally]

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