Image Zoom es otro plugin jQuery para crear el efecto lupa en imágenes, pero que a diferencia de otras alternativas parecidas, cuenta con muchísimas posibilidades a la hora de configurar.
Una de estas posibilidades, y una de las que más llamo mi atención, es la opción de darle un tinte a las imágenes, esto lo logra mediante algunas técnicas basadas en CSS, obteniendo un fantástico efecto que acentúa la atención del usuario en el área que desea agrandar.
Este plugin cuenta con la opción de utilizar controles externo, distintos tipos de zoom y hasta un Fancybox para cuando necesitemos implementar una galería de fotografías.
La licencia con la que se encuentra liberado este proyecto es MIT Y GPL, como la gran mayoría de bibliotecas y plugins jQuery.
Ejemplo de zoom en imágenes con jQuery
Incluimos las bibliotecas necesarias:
<script type="text/javascript" src="jquery.js"></script> <script src="jquery.elevatezoom.js" type="text/javascript"></script>
HTML:
<img id="zoom_01" src="small/image1.png" data-zoom-image="large/image1.jpg"/>
JavaScript:
$("#img_01").elevateZoom();
El plugin se puede configurar de muchas formas distintas, desde la posición donde va a mostrarse la imagen ampliada, hasta realizar el acercamiento en el mismo lugar que la imagen original.
Para conocer sus posibilidades visiten la web del proyecto, en la sección ejemplos hay mucho código con distintas opciones listas para utilizar en nuestros trabajos.
Los comentarios están cerrados.