Results 1 to 7 of 7

Thread: Featured Image Zoomer

  1. #1
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featured Image Zoomer

    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!

  2. #2
    Join Date
    Aug 2004
    Posts
    9,910
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    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.
    DD Admin

  3. #3
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thank you very much! It works!!

  4. #4
    Join Date
    Mar 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  5. #5
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,815
    Thanks
    2
    Thanked 425 Times in 419 Posts

    Default

    Code:
    		$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;})()
    };

    Code:
    	$('#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!
    	})
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  6. #6
    Join Date
    Apr 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Need to show both the images onload

    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

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    Please start a new thread for a new question.
    - John
    ________________________

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

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
  •