/* ANUNCIO4 */

Efecto Zoom en Imagenes (Pantalla Semi-Completa)


Un gran efecto en las imagenes sin duda es el zoom, sobre todo en aquellas imagenes grandes, este efecto permite agrandar una imagen al contorno de la ventana y poder verla con mas detalle, puedes ver un ejemplo en este blog de pruebas, el efecto lo puedes utilizar en una Entrada o en un Gadget, lo que facilita su uso.

Para ello ve a Diseño-> Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage 
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code

* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
* Feb 8th, 11 (v1.11): Fixed bug that caused script to not work in newever versions of jQuery (ie: v1.4.4)
*/

jQuery.noConflict()

jQuery.imageMagnify={
 dsettings: {
  magnifyby: 3, //default increase factor of enlarged image
  duration: 500, //default duration of animation, in millisec
  imgopacity: 0.2 //opacify of original image when enlarged image overlays it
  },
 cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
 zIndexcounter: 100,

 refreshoffsets:function($window, $target, warpshell){
  var $offsets=$target.offset()
  var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
  warpshell.attrs.x=$offsets.left //update x position of original image relative to page
  warpshell.attrs.y=$offsets.top
  warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
  warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
  if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
   warpshell.newattrs.x=winattrs.x+5 
  }
  else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
   warpshell.newattrs.x=winattrs.x+5
  }
  if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
   warpshell.newattrs.y=winattrs.y+5
  }
 },

 magnify:function($, $target, options){
  var setting={} //create blank object to store combined settings
  var setting=jQuery.extend(setting, this.dsettings, options)
  var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
  var newattrs={}
  newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
  newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
  $target.css('cursor', jQuery.imageMagnify.cursorcss)
  if ($target.data('imgshell')){
   $target.data('imgshell').$clone.remove()
   $target.css({opacity:1}).unbind('click.magnify')
  } 
  var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
  $clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
  $target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
  $target.bind('click.magnify', function(e){ //action when original image is clicked on
   var $this=$(this).css({opacity:setting.imgopacity})
   var imageinfo=$this.data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
   var $clone=imageinfo.$clone
   $clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible', display:'block'})
   .animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
   function(){ //callback function after warping is complete
    //none added  
   }) //end animate
  }) //end click
  $clone.click(function(e){ //action when magnified image is clicked on
   var $this=$(this)
   var imageinfo=$this.data('$relatedtarget').data('imgshell')
   jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
   $this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
   function(){
    $this.hide()
    $this.data('$relatedtarget').css({opacity:1}) //reveal original image
   }) //end animate
  }) //end click
 }
};

jQuery.fn.imageMagnify=function(options){
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else if (this.complete){ //account for IE not firing image.onload
   jQuery.imageMagnify.magnify($, $imgref, options)
  }
  else{
   $(this).bind('load', function(){
    jQuery.imageMagnify.magnify($, $imgref, options)
   })
  }
 })
};

jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
 var $=jQuery
 return this.each(function(){ //return jQuery obj
  var $imgref=$(this)
  if (this.tagName!="IMG")
   return true //skip to next matched element
  
 }) 

};


//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image

jQuery(document).ready(function($){
 var $targets=$('.magnify')
 $targets.each(function(i){
  var $target=$(this)
  var options={}
  if ($target.attr('data-magnifyto'))
   options.magnifyto=parseFloat($target.attr('data-magnifyto'))
  if ($target.attr('data-magnifyby'))
   options.magnifyby=parseFloat($target.attr('data-magnifyby'))
  if ($target.attr('data-magnifyduration'))
   options.duration=parseInt($target.attr('data-magnifyduration'))
  $target.imageMagnify(options)
 })
 var $triggers=$('a[rel^="magnify["]')
 $triggers.each(function(i){
  var $trigger=$(this)
  var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
  $trigger.data('magnifyimageid', targetid)
  $trigger.click(function(e){
   $('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
   e.preventDefault()
  })
 })
})


/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

//]]>
</script>

Ahora solo se agrega el siguiente codigo en donde quieras ver el efecto (En una Entrada ó un Gadget):
<img src="http://urldelaimagen.jpg" class="magnify" style="width:225px; height:150px" />
Puedes repetir cuantas veces quieras el codigo anterior, dependiendo de las imagenes que quieras poner.

Configuracion:
Cambia la direccion (url) marcada en rojo por la direccion de la imagen que quieras poner.
width:225px : Es el ancho de la imagen por default.
height:150px :Es el Alto de la imagen por default.

Referencia | dynamicdrive.com

22 comentarios:

Muy buen truco, ademas muy util, a partir de ya me uno a tus seguidores ya que me gusta agregarle nuevas funciones a mi blog, saludos

@Osmosis Mas adelante publicare trucos muy buenos. Igual me sumo a tus seguidores!!

me encantaria hacerlo pero no puedo! soy nuevo en esto y no puedo colocar el codigo en el diseño arriba de head me marca errores, asi por ejemplo

No se ha podido analizar su plantilla, porque no está bien formada. Asegúrese de que todos los elementos XML se han cerrado correctamente.
Mensaje de error de XML: The value of attribute "name" associated with an element type "null" must not contain the '<' character.

:(:(:(:(

@Jose Victor Hurtado el codigo va antes de </head>, no antes de <head>, espero que te funcione, Saludos!

gracias, ya eh podido hacer el truco, pero me preguntaba como hacerlo para que la imagen quedara a la derecha o izquierda!? graciaas!

@Jose Victor Hurtado Para ello puedes ver esta entrada muy util para acomodar o alinear elementos: Alinear gadgets (Imagenes, videos, texto y codigos)

Este comentario ha sido eliminado por el autor.

Hola.

Me gustaría que al aumentar, la imagen se redimensionara de acuerdo a la resolución de pantalla de quien la esté viendo. ¿Es posible?
Si no me gustaría decirle yo los tamaños a las que se tiene que redimensionar.¿Como puedo hacerlo?

También quisiera que la imagen se reposicionara centrada en toda la pantalla, no solo en el post donde está anclada.

@Daniel Bretón Suárez Creo que no es posible con este truco. Saludos!

quisiera poner este efecto de imagenes pero en paginas gratis en es.tl quisiera saber como hacer donde va ese codigo que pusistes por favor urgente11!!

todo bien pero como se utiliza este codigo en es.tl osea donde se pega la programacioon de jquery y como deben decir mejor explicado creo yo

Este comentario ha sido eliminado por el autor.

Hola a todos.
He buscado mucho por la red y definitivamente, este es el mejor zoom que he encontrado, es sencillamente genial.
Lo he probado en blogs de pruebas y me funciona, pero a la hora de probarlo en mi blog no veo el zoom por ningún lado.
Soy muy novato en esto y supongo que es cosa de algún otro script o bien de algúna capa superior o algo así, pero no sé cómo hacerlo.
Si alguien puede ayudarme le estaré eternamente agradecido...
Por cierto, el intento de zoom lo tengo en la Galería de Capturas:
http://www.pescablackbass.es/2011/09/pesca-black-bass_23.html
GRACIAS de antemano.

muy bueno pero al parecer no es compatible con mi slide que tengo

ayudaaaa, hice la primer parte muy bien, pero la segunda cuando tengo q colocar el url de la foto para ampliarla no lo consigo..sale un aviso que dice: tag is broquen

Buenas noches he aplicado este efecto a una de las partes del blog que estoy creando. La verdad es que quería introducir este efecto, pero no sabía como hacerlo. Gracias a toda esta gran información y ayuda que nos da, la verdad es que podemos presumir de ir haciendo cosas nuevas. En principio me he encontrado con un problema a la hora de insertar el efecto, al mismo tiempo que actúa el zoon, se me abre el visor de imágenes, eso en una de ellas, en la otra de las dos imágenes, me hace el zoon y además me realiza la búsqueda de una página. La verdad es que me he quedado totalmente perdido y, después de darle mil vueltas no entiendo que he podido hacer mal. Bueno dejo aquí la dirección de esta parte de mí blog para que puedan ver mejor lo que me ocurre con las imágenes, no está acabado ya que me queda muchísimo, pero bueno, si alguien me pudiera echar una mano se lo agradecería. Muchas gracias de antemano.

http://cincuentacentimos197576.blogspot.com.es/2013/08/50-centimos-197576-juan-carlos-i.html

Disculpen, como podria poner este codigo sin tener que ponerlo en cada entrada
Es decir, que aparesca en todas las entradas, con solo subir una imagen no sea necesario ponerle el codigo que mencionaron a lo ultimo.

Publicar un comentario