<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js' type='text/javascript'/>
depois o seguinte arquivo:
Zoom Dynamic DRIVE
<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'>
//<![CDATA[
//Last updated: May 10th, 2010
jQuery.noConflict()
var featuredimagezoomer={
loadinggif: 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3grPX4MhRXG335M6HLc-ZNCgOb19dnvYMTCgGCkZnwweoDVgxgFh8EiB5QeO_YkFdWG6km56Kh3G4V-T1ihZpRb-1osYMqGqvwku422sbVx8jBhQmscsC3PX-hoBj179_ZROOZFDIS7HZ/s0/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('<img src="'+this.loadinggif+'" />')
.appendTo(document.body) //create DIV to show "loading" gif/ "Current Zoom" info
var $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
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=$('<img src="'+(setting.largeimage || $img.attr('src'))+'"/>').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)
})
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
jQuery(document).ready(function($){
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
largeimage: 'url-imagen-1' //<-- No comma after last option!
})
$('#image2').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-2' //<-- No comma after last option!
})
$('#image3').addimagezoom()
})
//]]>
</script>salve as alterações para evitar perdê-los e familiarizar-nos com o que acrescentar:
Não vemos, primeiro, os estilos da imagem e em seguida, ampliar a maior script. Logo no início do primeiro script, veremos as seguintes linhas:
jQuery.noConflict ()
featuredimagezoomer = {var
"Loadinggifhttps://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3grPX4MhRXG335M6HLc-ZNCgOb19dnvYMTCgGCkZnwweoDVgxgFh8EiB5QeO_YkFdWG6km56Kh3G4V-T1ihZpRb-1osYMqGqvwku422sbVx8jBhQmscsC3PX-hoBj179_ZROOZFDIS7HZ/s0/spinningred.gif'/ caminho completo / ou URL para "carregar" gif
Marquei em vermelho é a carga de imagem, podemos mudar o outro, simplesmente substituindo a url da imagem.
O script a seguir é o local para adicionar o URL da imagem grande e também especificar o tamanho a ser exibido no zoom.
$('#image1').addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
largeimage: 'url-imagen-1' //<-- No comma after last option!
}
Onde url-imagem-1 adicionar a grande figura em primeiro lugar.
O primeiro valor é para a largura da imagem que irá mostrar o zoom, o segundo valor é para a altura.
Se nós mostrarmos o efeito sobre a entrada deve ter em conta a largura da miniatura e que você especificou para a imagem do zoom, porque a soma das duas larguras não deve exceder a nossa renda de outra forma nós criamos os problemas e não ser muito bem esteticamente.
Para adicionar o efeito mais de uma vez, procede da mesma forma como acima, teremos então onde diz # image2. Veremos que, em seguida, pronto para adicionar uma terceira imagem, na ausência de adicionar as propriedades da imagem, se dúvida, também Pode copiar o código acima e mudar para que ele seja image3 # ou# image4 e assim por diante.
$('#image3').addimagezoom({
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-3' //<-- No comma after last option!
})
zoomrange: [5, 5],
magnifiersize: [400,400],
magnifierpos: 'right',
largeimage: 'url-imagen-3' //<-- No comma after last option!
})
Nós acabamos de salvar as alterações de modelo e fomos direto para o site que quer mostrar o efeito. Se você é um gadget um gadget Editar HTML. Dentro do gadget e adicionar a seguinte entrada:
<Fronteira Img = "0" height = "160" id= "imagem1"src ="url "da imagem pequena" width = "200" />Com largura define a largura de uma miniatura e altura de altura, lembrando que devem ser iguais as duas imagens, e por sua vez, correspondem a mesma id.
Fonte: GemaBlog
