domingo, 7 de abril de 2013

Plugin Jquery Zoom Image

El siguiente plugin permite crear un zoom al poner el cursor sobre la imagen, el zoom es mostrado en un panel en la derecha que muestra una vista previa ampliada de la zona seleccionada, se puede añadir tantas imágenes como se quieran, es un buen complemento por ejemplo para una web que venda ropa.

Su uso como viene en la web de ejemplo es bastante sencillo, aunque es requisito que todas las imágenes tengan el mismo tamaño o algo menor y que nunca se les asigne un tamaño superior al del tamaño real de la imagen.

 Web Oficial: Jquery Zoom Image 


Jquery Zoom Image
Jquery Zoom Image

Código de ejemplo ...

//HEAD
<script>
$(function(){
window.onload = function(){
$("#image").ZoomImage();
}
});
</script>

//BODY
<img src="imagenes/image1.jpg" title-zoom="Jquery Zoom Image 1" id="image" class="load-this-image">

<div id="list-image-zoom" style="background: pink; padding: 10px;">
<img src="imagenes/image1.jpg" width="80" height="100" title-zoom="Jquery Zoom Image 1">
<img src="imagenes/image2.jpg" width="80" height="100" title-zoom="Jquery Zoom Image 2">
<img src="imagenes/image3.jpg" width="80" height="100" title-zoom="Jquery Zoom Image 3">
<img src="imagenes/image4.jpg" width="80" height="100" title-zoom="Jquery Zoom Image 4">
<img src="imagenes/image5.jpg" width="80" height="100" title-zoom="Jquery Zoom Image 5">
<img src="imagenes/image6.jpg" width="80" height="100" title-zoom="Jquery Zoom Image 6">
</div>