Featured Image Zoomer - stays on first img after changing src

[lbowenc]

1) Script Title: Featured Image Zoomer 1.5.1

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

3) Zoomer works great, but my page has several thumbnails that can be clicked to replace a larger image that is configured to use the zoomer. Unfortunately, when I replace the img src attribute the zoomer continues to magnify the original image.

The page where this happens is:

new.robynbrooksny.com/index.php?main_page=product_info&cPath=1_9_20&products_id=52

I saw that this was addressed a couple of years ago on older version of the utility but I wasn't able to make it work with 1.5.1.

Thanks in advance for any help! ... Bowen

[vwphillips]

modify with new option

	$('#image1').addimagezoom({
        ID:'image1',
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg' //<-- No comma after last option!
	})

modify function

	init: function($, $img, options){
		var setting=$.extend({}, this.dsetting, options), w = $img.width(), h = $img.height(), o = $img.offset(),
 	fiz = this, $tracker, $cursorshade, $statusdiv, $magnifier, lastpage = {pageX: 0, pageY: 0};
        featuredimagezoomer[setting.ID]=setting;
		setting.largeimage = setting.largeimage || $img.get(0).src;
		$magnifier=$('<div class="magnifyarea" style="position:absolute;width:'+setting.magnifiersize[0]+'px;height:'+setting.magnifiersize[1]+'px;left:-10000px;top:-10000px;visibility:hidden;overflow:hidden;border:1px solid black;" />')
			.append('<div style="position:relative;left:0;top:0;" />')
			.appendTo(document.body) //create magnifier container
		//following lines - create featured image zoomer divs, and absolutely positioned them for placement over the thumbnail and each other:
		if(setting.cursorshade){
			$cursorshade = $('<div class="cursorshade" style="visibility:hidden;position:absolute;left:0;top:0;" />')
				.css({border: setting.cursorshadeborder, opacity: setting.cursorshadeopacity, backgroundColor: setting.cursorshadecolor})
				.appendTo(document.body);
		} else {
			$cursorshade = $('<div />'); //dummy shade div to satisfy $tracker.data('specs')
		}
		$statusdiv = $('<div class="zoomstatus preloadevt" style="position:absolute;visibility:hidden;left:0;top:0;" />')
			.html('<img src="'+this.loadinggif+'" />')
			.appendTo(document.body); //create DIV to show "loading" gif/ "Current Zoom" info
		$tracker = $('<div class="zoomtracker" style="cursor:progress;position:absolute;left:'+o.left+'px;top:'+o.top+'px;height:'+h+'px;width:'+w+'px;" />')
			.css({backgroundImage: (this.isie? 'url(cannotbe)' : 'none')})
			.appendTo(document.body);
		$(window).resize(function(){ //in case resizing the window repostions the image
				var o = $img.offset();
				$tracker.css({left: o.left, top: o.top});
			});

modify function

		$tracker.one('mouseover', function(e){
			var $maginner=$magnifier.find('div:eq(0)')
			var $bigimage=$('<img id="'+setting.ID+'Large" src="'+setting.largeimage+'"/>').appendTo($maginner)
			var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
			$img.css({opacity:0.1}) //"dim" image while large image is loading
			var imgcoords=getcoords()
			$statusdiv.css({left:imgcoords.left+w/2-$statusdiv.width()/2, top:imgcoords.top+h/2-$statusdiv.height()/2, visibility:'visible'})
			$bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
				$img.css({opacity:1}) //restore thumb image opacity
				$statusdiv.empty().css({border:'1px solid black', background:'#C0C0C0', padding:'4px', font:'bold 13px Arial', opacity:0.8}).hide().removeClass('preloadevt');
				if($tracker.data('premouseout')){
					$statusdiv.addClass('featuredimagezoomerhidden');
				}
				if (setting.zoomrange){ //if set large image to a specific power
					var nd=[w*setting.zoomrange[0], h*setting.zoomrange[0]] //calculate dimensions of new enlarged image
					$bigimage.css({width:nd[0], height:nd[1]})
				}
				getspecs($maginner, $bigimage) //remember various info about thumbnail and magnifier
				$magnifier.css({display:'none', visibility:'visible'})
				$tracker.mouseover(function(e){ //image onmouseover
					$tracker.data('specs').coords=getcoords() //refresh image coords (from upper left edge of document)
					fiz.showimage($, $tracker, $magnifier, showstatus)
				})
				$tracker.mousemove(function(e){ //image onmousemove
					fiz.moveimage($tracker, $maginner, $cursorshade, e)
				})
				if (!$tracker.data('premouseout')){
					fiz.showimage($, $tracker, $magnifier, showstatus);
					fiz.moveimage($tracker, $maginner, $cursorshade, lastpage);
				}
				$tracker.mouseout(function(e){ //image onmouseout
					fiz.hideimage($tracker, $magnifier, showstatus)
				}).css({cursor: fiz.magnifycursor});
				if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
					$tracker.bind('DOMMouseScroll mousewheel', function(e){
						fiz.magnifyimage($tracker, e, setting.zoomrange);
						e.preventDefault();
					});
				}
			})	//end $bigimage onload
			if ($bigimage.get(0).complete){ //if image has already loaded (account for IE, Opera not firing onload event if so)
				$bigimage.trigger('loadevt')
			}
			else{
				$bigimage.bind('load', function(){$bigimage.trigger('loadevt')})
			}
		})
	},

	iname: (function(){var itag = jQuery('<img />'), iname = itag.get(0).tagName; itag.remove(); return iname;})()
};

new function

function Swap(id,thumb,large){
 var t=document.getElementById(id),m=document.getElementById(id+'Large');
 if (t&&featuredimagezoomer[id]){
  t.src=thumb;
  featuredimagezoomer[id].largeimage=large||thumb;
  if (m){
   m.src=large||thumb;
  }
 }
}

HTML

<p><img id="image1" border="0" src="http://www.vicsjavascripts.org.uk/StdImages/Egypt12.jpg" style="width:300px;height:225px" /><p>
<input type="button" name="" value="Swap" onmouseup="Swap('image1','http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg','http://www.vicsjavascripts.org.uk/StdImages/Listening.jpg');"/>
<input type="button" name="" value="Swap" onmouseup="Swap('image1','http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg');"/>

see also

http://www.vicsjavascripts.org.uk/Im...geViewerIV.htm

[lbowenc]

Thank you! I made the changes you showed and it is working great with Firefox. Unfortunately, there is an issue with IE8 & IE9 where the magnifier window on the thumbnail is "stuck" in the lower right corner after I swap the image. It moves around fine on the original image but once I swap it stays stuck.

Any thoughts? Thanks ... Bowen

[vwphillips]

see

http://www.vicsjavascripts.org.uk/DD/121104A.htm

[jscheuer1]

There's also:

http://home.comcast.net/~jscheuer1/s...izoom/demo.htm

It's not fully documented yet. The required files are linked to on the demo page and the source code of the demo page does show you what to do and comments in it explain things fairly well.

But if you want to use it and have any questions, just ask.