Featured Image Zoomer

[fleance]

1) Script Title: Featured Image Zoomer

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

3) Describe problem: Hi, this script is great! But instead of Mouseover, how can I change it to zoom the image on click? Please kindly advise. Please help

THANKS!

[ddadmin]

By click, do you mean activate the zoom effect via click, but once activated, still zoom the image around while the mouse moves around inside the image? If so, the attached modified .js file does this.

[fleance]

Thank you very much! It works!!

[conniegoss]

It works for me too. Thank you! On my page design it's better usability to have the user click.

However, with this script, I do notice that I have lost the transparent square "lens" and instead have just the crosshairs on the smaller image. It works fine that way, but I like the lens. Is there any way to get it back? Thank you so much. These functions are wonderful and I am so happy to have your help!

[vwphillips]

		$tracker[setting.zoomevent!='mouseup'&&setting.zoomevent!='click'?'mouseover':'mouseup'](function(e){
					$cursorshade.add($magnifier).add($statusdiv).removeClass('featuredimagezoomerhidden');
					$tracker.data('premouseout', false);
			}).mouseout(function(e){
					$cursorshade.add($magnifier).add($statusdiv.not('.preloadevt')).addClass('featuredimagezoomerhidden');
					$tracker.data('premouseout', true);
			}).mousemove(function(e){ //save tracker mouse position for initial magnifier appearance, if needed
				lastpage.pageX = e.pageX;
				lastpage.pageY = e.pageY;
			});

		$tracker.one(setting.zoomevent!='mouseup'&&setting.zoomevent!='click'?'mouseover':'mouseup', function(e){
			var $maginner=$magnifier.find('div:eq(0)')
			var $bigimage=$('<img 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[setting.zoomevent!='mouseup'&&setting.zoomevent!='click'?'mouseover':'mouseup'](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;})()
};

	$('#image1').addimagezoom({
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		magnifierpos: 'right',
		cursorshade: true,
        zoomevent:'mouseup', //(optional) the event type to display the zoom image, 'mouseover', 'mouseup' or 'click'. (string, default = 'mouseover')
		largeimage: 'http://www.vicsjavascripts.org.uk/StdImages/WinterPalace.jpg' //<-- No comma after last option!
	})

[upm]

Hi,

I need to show both images on load rather than showing the big image while clicking or mouse hover. Also i need to add few clickable links within the bigger image as well. could someone tell me how i could do this in Image Zoomer? Its bit urgent.

Regards,

U

[jscheuer1]

Please start a new thread for a new question.