jQuery plugin zoomwall para aumentar de tamaño tus galerías



jQuery plugin zoomwall para aumentar de tamaño tus galerías, en ocasiones mostramos imágenes en nuestra aplicación que a veces el usuario quiere ver mucho más grande utilizar algún tipo de zoom, esto con la finalidad de ver más claro o con más detalle alguna fotografía o imagen en especifico.

La solución a este problema se llama zoomWall que es un plugin que se aplica a las imágenes que se muestran con la intensión de aumentar de tamaño al dar un clic.

En la siguiente dirección puedes ver un ejemplo funcional:http://ericleong.me/zoomwall.js/ de este plugin la manera de usarlo es referenciada a los elementos img mediante el id o un equivalente con jQuery, este plugin también integra una hoja de estilos que permite crear imágenes de diferentes tamaños.

Cabe recalcar que este plugin esta realizado para mostrar todas las imágenes ocupando la pantalla.

La forma de usarlo es la siguiente:

1.- Lo primero que tienes que integrar es la referencia al archivo js y la referencia al documento cs:


<link rel="stylesheet" type="text/css" href="zoomwall.css" />
<script type="text/javascript" src="zoomwall.js"></script>

2.- Posterior a esto tienes que identificar las imágenes y colocarle un id y una clase en este caso gallery y zoomwall respectivamente, como se darán cuenta la etiqueta imagen tiene un atributo llamado data-highres que tiene la imagen grande que se desea cargar despues de darle clic a la imagen (la hacer zoom a la imagen )

<div id="gallery" class="zoomwall">
    <img src="./images/01.jpg" data-highres="./images/01_1280.jpg" />
    <img src="./images/02.jpg" data-highres="./images/02_1280.jpg" />
    <img src="./images/03.jpg" data-highres="./images/03_1280.jpg" />
</div>

3.- Por ultimo el script que convierte la colección de imágenes en todo un componente

<script>
window.onload = function() {
    zoomwall.create(document.getElementById('gallery'));
};
</script>

Con eso ya obtendrás un resultado como el siguiente:

 

You may also like...