Artículo
|
Haz zoom a tus imágenes utilizando el plugin para jQuery Zoomy |
Zoomy es un plugin desarrollado en JavaScript que nos permitirá hacer zoom a las imágenes que tengamos en nuestras aplicaciones. De esta forma nos podemos ahorrar tener que hacer varios tamaños de las imágenes que vamos subiendo, sino que simplemente, con enlazar estas a la librería, nos permitirá verlas de una forma más grande.
Además de la funcionalidad que nos ofrece esta utilidad, su sencillo uso la hace una herramienta muy recomendada para su uso. Con muy pocas líneas de código, podremos tener funcionando el plugin en nuestra aplicación. También dispone de varias opciones para poder personalizar nuestra la aplicación.
Para utilizar el plugin, lo primero que debemos de hacer es añadir las librerias a nuestro proyecto, tanto jQuery como el plugin.
Además de la funcionalidad que nos ofrece esta utilidad, su sencillo uso la hace una herramienta muy recomendada para su uso. Con muy pocas líneas de código, podremos tener funcionando el plugin en nuestra aplicación. También dispone de varias opciones para poder personalizar nuestra la aplicación.
Para utilizar el plugin, lo primero que debemos de hacer es añadir las librerias a nuestro proyecto, tanto jQuery como el plugin.
<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, debemos de enlazar la imagen, asignándole la clase que hará el zoom:
<a href="zoomImg.jpg" class="zoom"> <img src="displayImg.jpg" alt="This is the Display Image" /> </a>
Por último tedremos que hacer la llamada a la función que hace el zoom:
$(function(){
$('.zoom').zoomy();
})(jQuery)
Como hemos dicho, se pueden añadir funcionalidades extras, como indicar el área del zoom, si la forma será cuadrada o redonda...
$('.zoom').zoomy({
zoomSize: 350,
clickable: false,
round: true,
glare: true
});
Vía: redeyeoperations
![]() |
Publicado por: Angel Carrero |
|
|
Comentarios
Últimas noticias
· factura
Últimos artículos














































