Featured Image Zoomer

[jfrene]

1) Script Title: Featured Image Zoomer

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

3) Describe problem:
Hi,

I have a series of small picture that I can click on to load the picture bigger in a div. I'm using an 'onClick' event with a function to load the bigger image because the page should not be refreshed.

function ShowImage(image)
{
document.getElementById('image1').src='images/items/'+image;
}

The problem is I must rollover the big picture twice to have the right image in the zoomer otherwise I get the previous one to zoom?
I don't know how to fix this?
A little help would be greatly appreciated!

[jscheuer1]

This seems to work.

Use this slightly modified version of the script:

Attachment 3448

When you init your zoomer it looks something like so:

jQuery(document).ready(function($){
 $('#image1').addimagezoom({
   //options
 })
})

It doesn't matter what options (if any) you specify as long as you are using the image itself as the magnified version (the default, and from what you say in your post, it sounds like you are). Add to the above code (or your version of it), so you get this:

jQuery(document).ready(function($){
 var one = $('#image1').addimagezoom({
   //options
 }).mouseover();
 (function(){
  if(!one.data('specs')){
   setTimeout(arguments.callee, 30);
   return;
  }
  one.mouseout();
 })();
})

Then instead of doing this:

function ShowImage(image)
{
document.getElementById('image1').src='images/items/'+image;
}

do:

function ShowImage(image){
	var im = 'images/items/' + image;
	jQuery('#image1').attr('src', im).data('specs').magnifier.$image.attr('src', im);
}

[jfrene]

Thank you so much, it's working great!

[jscheuer1]

You're welcome. I was playing around with this a bit more and noticed that sometimes, when the browser hasn't cached the first image yet (or somethimes when the browser is reloading), there's a ghost image of the enlarged image that appears briefly as the page loads.

This can be eliminated. It requires the use of a transparent .gif image and some additional/changed style and code.

If you are using the drop shadow:

.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

Change that to:

.magnifyarea {
border: none!important;
}
.zoomImage { /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}

You will need a small transparent .gif image, like this one (right click and save as, you won't be able to see it):

http://home.comcast.net/~jscheuer1/s...omer/empty.gif

Then add to our already custom init code:

jQuery(document).ready(function($){

	var one = $('#image1').addimagezoom({
		//options,
		largeimage: 'empty.gif' //<-- No comma after last option!
	}).mouseover();
	
	(function(){
		if(!one.data('specs')){
			setTimeout(arguments.callee, 30);
			return;
		}
		one.mouseout().data('specs').magnifier.$image.attr('src', one.attr('src'))
		one.data('specs').magnifier.$outer.removeClass('magnifyarea').addClass('zoomImage');
	})();
})

As before use your existing options where the green part is. Make sure each one has a comma at the end. That's it, everything else is the same.

[ddadmin]

Very nice John! I took a stab at this last night, but gave up after not getting the desired result.

[jscheuer1]

Very nice John! I took a stab at this last night, but gave up after not getting the desired result.

Thanks DD. You left so many hooks (from featuredimagezoomer.js):

			$img.data('specs', {
				$statusdiv: $statusdiv,
				statustimer: null,
				magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
				magsize: magsize,
				magpos: setting.magnifierpos,
				imagesize: imagesize,
				curpower: power,
				coords: getcoords()
			})

I figured there had to be a way. Just this (for the OP's requirements):

function ShowImage(image){
	var im = 'images/items/' + image;
	jQuery('#image1').attr('src', im).data('specs').magnifier.$image.attr('src', im);
}

was enough to get it working, except if the image was changed before the first image (the one loaded on page load) was magnified. Hence all that business with the self executing function to do a dry run.

I had to modify the featuredimagezoomer.js script only to accommodate IE because it threw a fatal error (in combination with jQuery 1.4.2, and my self executing function) on (from the moveimage function):

		$maginner.css({left:getboundary('left', newx), top:getboundary('top', newy)})
		specs.$statusdiv.css({left:pagex-10, top:pagey+20})

because those values were NaN. All other browsers just saw that as invalid style assignments, so they were gracefully dropped.

[ddadmin]

Nice. I should probably start taking advantage of self executing functions more, as up until this point, my familiarity with them is basically skin deep as far as what they are and how to use them.