BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Zoom de imágenes con jQuery snipe plugin

23/ENE/2013 4.065 visitas Ver comentarios
Zoom de imágenes con jQuery snipe plugin

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Este plugin es muy sencillo pero nos da un efecto muy bonito para hacer zoom en nuestras imágenes en el mismo lugar y sin necesidad de otros plugins para ampliar como lightboxes o similares.

Todo lo que necesitamos son 2 imágenes, o mejor dicho, 2 versiones de la misma imagen. La primera que se mostrará como base a un tamaño normal y la segunda, o la imagen ampliada a un tamaño superior.

La imagen de base se pinta en nuestro html como cualquier otra imagen mientras que la ampliada se indica en el atributo data-zoom. El plugin ya se encarga de hacer magia!

Si quieres ver la demo o bajar los ficheros, los tienes arriba en los nuevos botones (a prueba de cortos de vista) que puse en la nueva versión de mi web :)

Código 1 - HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.snipe.min.js"></script>
Código 2 - HTML
<img src="medium_bw.jpg" id="demo1" data-zoom="large.jpg" alt="">
Código 3 - JAVASCRIPT
$(function(){
	$('#demo1').snipe();
});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018