Pada sebuah website, kamu pasti pernah melihat tampilan gambar yang apabila mouse mengarah ke gambar. Maka gambar akan membesar. Berikut caranya.
kemudian, inilah script featuredimagezoomer,…silahkan di copy, dan disimpan sebagai featuredimagezoomer.js :
Hasil:
Sumber
Dhany Zone
Code:
<style type=”text/css”>
.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;
}
</style>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js“></script>
<script type=”text/javascript” src=”featuredimagezoomer.js”>
</script>
<script type=”text/javascript”>
jQuery(document).ready(function($){
$(‘#image1′).addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: ‘right’,
largeimage: ‘leah1.jpg’ //<– No comma after last option!
})
$(‘#image2′).addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: ‘right’,
largeimage: ‘leah2.jpg’ //<– No comma after last option!
})
$(‘#image3′).addimagezoom()
})
</script>
<body>
</body>
Code:
jQuery.noConflict()
var featuredimagezoomer={
loadinggif: ‘spinningred.gif’, //full path or URL to “loading” gif
magnifycursor: ‘crosshair’, //Value for CSS’s ‘cursor’ attribute, added to original image
/////NO NEED TO EDIT BEYOND HERE////////////////
dsetting: {magnifiersize:[200,200]}, //default settings
isContained:function(m, e){
var e=window.event || e
var c=e.relatedTarget || ((e.type==”mouseover”)? e.fromElement : e.toElement)
while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
if (c==m)
return true
else
return false
},
showimage:function($, $img, $mag, showstatus){
var specs=$img.data(‘specs’)
var coords=$img.data(‘specs’).coords //get coords of thumb image (from upper corner of document)
specs.windimensions={w:$(window).width(), h:$(window).height()} //remember window dimensions
var magcoords={} //object to store coords magnifier DIV should move to
magcoords.left=coords.left+((specs.magpos==”left”)? -specs.magsize.w-10 : +$img.width()+10)
$mag.css({left: magcoords.left, top:coords.top}).show() //position magnifier DIV on page
specs.$statusdiv.html(‘Current Zoom: ‘+specs.curpower+’<div style=”font-size:80%”>Use Mouse Wheel to Zoom In/Out</div>’)
if (showstatus) //show status DIV? (only when a range of zoom is defined)
this.showstatusdiv(specs, 200, 2000)
},
hideimage:function($img, $mag, showstatus){
var specs=$img.data(‘specs’)
$img.data(‘mouseisout’, true)
$mag.hide()
if (showstatus)
this.hidestatusdiv(specs)
},
showstatusdiv:function(specs, fadedur, showdur){
clearTimeout(specs.statustimer)
specs.$statusdiv.fadeIn(fadedur) //show status div
specs.statustimer=setTimeout(function(){featuredimagezoomer.hidestatusdiv(specs)}, showdur) //hide status div after delay
},
hidestatusdiv:function(specs){
specs.$statusdiv.stop(true, true).hide()
},
moveimage:function($img, $maginner, e){
function getboundary(b, val){ //function to set x and y boundaries magnified image can move to
if (b==”left”){
var rb=-specs.imagesize.w*specs.curpower+specs.magsize.w
return (val>0)? 0 : (val<rb)? rb : val
}
else{
var tb=-specs.imagesize.h*specs.curpower+specs.magsize.h
return (val>0)? 0 : (val<tb)? tb : val
}
}
var specs=$img.data(‘specs’)
var imgcoords=specs.coords
var pagex=(e.pageX || specs.lastpagex), pagey=(e.pageY || specs.lastpagey)
var x=pagex-imgcoords.left, y=pagey-imgcoords.top
var newx=-x*specs.curpower+specs.magsize.w/2 //calculate x coord to move enlarged image
var newy=-y*specs.curpower+specs.magsize.h/2
$maginner.css({left:getboundary(‘left’, newx), top:getboundary(‘top’, newy)})
specs.$statusdiv.css({left:pagex-10, top:pagey+20})
specs.lastpagex=pagex //cache last pagex value (either e.pageX or lastpagex), as FF1.5 returns undefined for e.pageX for “DOMMouseScroll” event
specs.lastpagey=pagey
},
magnifyimage:function($img, e, zoomrange){
var delta=e.detail? e.detail*(-120) : e.wheelDelta //delta returns +120 when wheel is scrolled up, -120 when scrolled down
var zoomdir=(delta<=-120)? “out” : “in”
var specs=$img.data(‘specs’)
var magnifier=specs.magnifier, od=specs.imagesize, power=specs.curpower
var newpower=(zoomdir==”in”)? Math.min(power+1, zoomrange[1]) : Math.max(power-1, zoomrange[0]) //get new power
var nd=[od.w*newpower, od.h*newpower] //calculate dimensions of new enlarged image within magnifier
magnifier.$image.css({width:nd[0], height:nd[1]})
specs.curpower=newpower //set current power to new power after magnification
specs.$statusdiv.html(‘Current Zoom: ‘+specs.curpower)
this.showstatusdiv(specs, 0, 500)
$img.trigger(‘mousemove’)
},
init:function($, $img, options){
var setting=$.extend({}, this.dsetting, options)
var $statusdiv=$(‘<div style=”position:absolute;visibility:hidden;left:0;top:0;z-index:1000″ />’)
.html(”)
.appendTo(document.body) //create DIV to show “loading” gif/ “Current Zoom” info
var $magnifier=$(‘<div 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
function getspecs($maginner, $bigimage){ //get specs function
var magsize={w:$magnifier.width(), h:$magnifier.height()}
var imagesize={w:$img.width(), h:$img.height()}
var power=(setting.zoomrange)? setting.zoomrange[0] : ($bigimage.width()/$img.width()).toFixed(5)
$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()
})
}
function getcoords(){ //get coords of thumb image function
var offset=$img.offset() //get image offset from document
return {left:offset.left, top:offset.top}
}
$img.one(‘mouseover’, function(e){
var $maginner=$magnifier.find(‘div:eq(0)’)
var $bigimage=$(”).appendTo($maginner)
var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
$img.attr({alt:”, title:”}).css({opacity:0.1}) //remove alt/title attribute of thumb image and “dim” image while large image is loading
var imgcoords=getcoords()
$statusdiv.css({left:imgcoords.left+$img.width()/2-$statusdiv.width()/2, top:imgcoords.top+$img.height()/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()
if (setting.zoomrange){ //if set large image to a specific power
var nd=[$img.width()*setting.zoomrange[0], $img.height()*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’})
if (!$img.data(‘mouseisout’))
featuredimagezoomer.showimage($, $img, $magnifier, showstatus)
$img.mouseover(function(e){ //image onmouseover
$img.data(‘specs’).coords=getcoords() //refresh image coords (from upper left edge of document)
if (!featuredimagezoomer.isContained($statusdiv.get(0), e))
featuredimagezoomer.showimage($, $img, $magnifier, showstatus)
})
$img.mousemove(function(e){ //image onmousemove
featuredimagezoomer.moveimage($img, $maginner, e)
})
featuredimagezoomer.moveimage($img, $maginner, e)
$img.mouseout(function(e){ //image onmouseout
if (!featuredimagezoomer.isContained($statusdiv.get(0), e))
featuredimagezoomer.hideimage($img, $magnifier, showstatus)
})
$statusdiv.mouseout(function(e){ //status div onmouseout
if (!featuredimagezoomer.isContained($statusdiv.get(0), e) && e.relatedTarget!=$img.get(0)){ //if mouse is not moving into another element within status div or into thumbnail image itself
featuredimagezoomer.hideimage($img, $magnifier, showstatus) //hide image
}
})
if (setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]){ //if zoom range enabled
var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? “DOMMouseScroll” : “mousewheel” //FF doesn’t recognize mousewheel as of FF3.x
$img.bind(mousewheelevt, function(e){
featuredimagezoomer.magnifyimage($img, 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’)})
}
})
}
}
jQuery.fn.addimagezoom=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
if (this.tagName!=”IMG”)
return true //skip to next matched element
var $imgref=$(this)
$imgref.css({cursor:featuredimagezoomer.magnifycursor})
featuredimagezoomer.init($, $imgref, options)
})
}Hasil:
Sumber
Dhany Zone