Efeito Lupa (Zoom)

[Lucas Ramos_168509 0]

Bom,o site onde consegui os códigos é esse: http://mlens.musings.it/

 

Usando o Blogger,fui em Adicionar um Gadget (HTML/JavaScript), logo colei o seguinte código:

 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
(function(d){var e=[],a=0;var b={init:function(f){this.each(function(){var k={lensShape:"square",lensSize:100,borderSize:4,borderColor:"#888",borderRadius:0,imgSrc:"",lensCss:""},n=d(this),j=n.data("mlens"),h=d(),g=d(),i=d(),l=d();h=d.extend(k,f);if(h.imgSrc==""){h.imgSrc=n.attr("src")}var m="background-position: 0px 0px;width: "+String(h.lensSize)+"px;height: "+String(h.lensSize)+"px;float: left;display: none;border: "+String(h.borderSize)+"px solid "+h.borderColor+";background-repeat: no-repeat;position: absolute;";switch(h.lensShape){case"square":case"":default:m=m+"border-radius:"+String(h.borderRadius)+"px;";break;case"circle":m=m+"border-radius: "+String(h.lensSize/2+h.borderSize)+"px;";break}n.wrap("<div id='mlens_wrapper_"+a+"' />");i=n.parent();i.css({width:n.width()});g=d("<div style='"+m+"' class='"+h.lensCss+"'> </div>").appendTo(i);l=d("<img style='display:none;' src='"+h.imgSrc+"' />").appendTo(i);g.css({backgroundImage:"url('"+h.imgSrc+"')",cursor:"none"});n.attr("data-id","mlens_"+a);n.data("mlens",{lens:n,options:h,target:g,imageTag:l,parentDiv:i,instance:a});j=n.data("mlens");e[a]=j;g.mousemove(function(o){d.fn.mlens("move",n.attr("data-id"),o)});n.mousemove(function(o){d.fn.mlens("move",n.attr("data-id"),o)});n.hover(function(){g.show()},function(){g.hide()});g.hover(function(){g.show()},function(){g.hide()});a++;return e})},move:function(g,n){g=c(g);var l=e[g],f=l.lens,h=l.target,j=l.imageTag,k=f.offset(),i=parseInt(n.pageX-k.left),m=parseInt(n.pageY-k.top),p=j.width()/f.width(),o=j.height()/f.height();if(i>0&&m>0&&i<f.width()&&m<f.height()){i=String(-((n.pageX-k.left)*p-h.width()/2));m=String(-((n.pageY-k.top)*o-h.height()/2));h.css({backgroundPosition:i+"px "+m+"px"});i=String(n.pageX-k.left-h.width()/2);m=String(n.pageY-k.top-h.height()/2);h.css({left:i+"px",top:m+"px"})}l.target=h;e[g]=l;return e},update:function(m,h){m=c(m);var i=e[m],l=i.lens,g=i.target,j=i.imageTag,f=d.extend(i.options,h);if(f.imgSrc==""){f.imgSrc=l.attr("src")}var k="background-position: 0px 0px;width: "+String(f.lensSize)+"px;height: "+String(f.lensSize)+"px;float: left;display: none;border: "+String(f.borderSize)+"px solid "+f.borderColor+";background-repeat: no-repeat;position: absolute;";switch(f.lensShape){case"square":case"":default:k=k+"border-radius:"+String(f.borderRadius)+"px;";break;case"circle":k=k+"border-radius: "+String(f.lensSize/2+f.borderSize)+"px;";break}g.attr("style",k);j.attr("src",f.imgSrc);g.css({backgroundImage:"url('"+f.imgSrc+"')",cursor:"none"});i.lens=l;i.target=g;i.options=f;i.imageTag=j;e[m]=i;return e},destroy:function(){return this.each(function(){var g=d(this),f=g.data("mlens");d(window).unbind(".mlens");g.removeData("mlens");a=0})}};function c(g){if(typeof(g)==="string"){var f=g.indexOf("_");if(f!=-1){g=g.substr(f+1)}}return g}d.fn.mlens=function(f){if(b[f]){return b[f].apply(this,Array.prototype.slice.call(arguments,1))}else{if(typeof f==="object"||!f){return b.init.apply(this,arguments)}else{d.error("Method "+f+" does not exist on jQuery.mlens")}}}})(jQuery);



</script>


<script type="text/javascript">
$(document).ready(function()
{
$("#green_monster").mlens(
{
imgSrc: $("#green_monster").attr("data-big"), // path of the hi-res version of the image
lensShape: "circle", // shape of the lens (circle or square)
lensSize: 180, // size of the lens (in px)
borderSize: 1, // size of the lens border (in px)
borderColor: "#000", // color of the lens border (#hex)
borderRadius: 0 // border radius (optional, only if the shape is square)
});
});
</script>



<img id="green_monster" src="http://imageshack.us/a/img14/6127/fe2ed3b329441e169e0530c.jpg" alt="green monster graffiti by Kotzian" data-big="http://imageshack.us/a/img834/6127/fe2ed3b329441e169e0530c.jpg" />

 

Pronto,até aí,tudo ok,funcionou perfeitamente. ( Ver o blog de teste: http://pensamentosnoturnos82.blogspot.com.br/ )

 

 

 

 

 

Agora quando fui fazer o mesmo procedimento em outro Blog (Blogger),o código não funcionou...

 

apareceu apenas a imagem,mas sem o efeito lupa...

 

O que devo fazer?

[Pedro Ernesto Mattos 1]

Usa o shadowbox, é bem melhor. e vai direto. no blogger ele funciona direitnho.

e olhe também esse site:

 

http://www.zoomdigital.com.br/utilizando-o-shadowbox/

[Lucas Ramos_168509 0]

É interessante,porém meu blog tem um estilo mais OLD...e um simples efeito de Lupa combinaria mais...

 

 

Pena que nem sempre o Blogger ajuda...

[Lucas Ramos_168509 0]

Não precisa mais,já consegui outro código que funcionou. Descobri que o outro código estava em conflito com um elemento,por isso não funcionava adequadamente.