SummArg | Cursos y recursos para webmasters

07/02/2011

Zoomy, una lupa sobre tus imágenes con jQuery

Zoomy es un plugin sencillo de usar para jQuery que nos permite aplicar un efecto “lupa” sobre nuestras imágenes. Consiste en un visor que aumenta el tamaño de la sección de la imagen que esté debajo del puntero. Dicho visor incluso trae un pre-loader para ir mostrando su mensaje de carga hasta que esté disponible para el usuario.

Su implementación es muy simple. Primero debemos descargar los archivos de la web oficial del plugin e insertar las correspondientes llamadas desde la sección de nuestro documento modificando las rutas a los archivos del script:

<link type="text/css" rel="stylesheet" href="path-to/zoom.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript" src="path-to/jquery.zoomy0.5.min.js."></script>

Luego se deben colocar las imágenes de la siguiente manera:

<a href="zoomImg.jpg" class="zoom">
    <img src="displayImg.jpg" alt="Esta es una imagen" />
</a>

Finalmente se inicializa el script:

<script type="javascript">
$(function(){
    $('.zoom').zoomy();
})(jQuery)
</script>

También tenemos algunas opciones para personalizar el efecto:

$('.zoom').zoomy({
    zoomSize: 200, // Tamaño del zoom
    clickable: false, // Al colocarlo en true es posible utilizarlo con el plugin lightbox
    round: true, // Se puede tener una "lupa" o visor redondo o cuadrado.
    glare: true // añade o suprime un marco interno que da un efecto de biselado
});       

Dejar un comentario

  1. Genial, ya esta en mi red

Dejar un comentario