PDA

View Full Version : Featured Image Zoomer



fleance
06-13-2010, 01:22 PM
1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.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! :p

ddadmin
06-13-2010, 07:50 PM
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
06-14-2010, 02:58 AM
Thank you very much! It works!!

conniegoss
04-01-2012, 05:59 AM
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
04-01-2012, 12:36 PM
$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
04-25-2012, 05:21 PM
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
04-26-2012, 12:02 AM
Please start a new thread for a new question.