Zoomi – Javascript para añadir efecto zoom a nuestras imágenes

Publicado por Nikko el dia 22 Nov 2007 - Guardado en Diseño, Javascript, Scripts Leido 6,545 Veces

zoomi.jpg

Zoomi es un ligero Javascript que posee la capacidad de permitirnos añadir a nuestras imágenes un efecto zoom muy bonito. Su utilización es realmente sencilla. Para utilizarla deberemos descargar por supuesto zoomi.js pero también necesitaremos de jQuery.Ver Demo

Descargamos los script: zoomi.js y jQuery.js e incluir el siguiente código en nuestro < head>

Ahora a cualquier < img > deberemos darle la clase = "zoomi" para que automáticamente se convierta en una imagen con efecto zoomi.
Zoomi utiliza el atributo alt="url" para proporcionar la dirección de la segunda imagen que nos permitirá realizar el zoom. Lo que significa que la primer imagen será nuestra miniatura y la segunda una imagen en tamaño mayor.

He aquí un ejemplo:

CSS:
<img class="zoomi" src="bamboo1.jpg" alt="bamboo.jpg">

Aunque Zoomi también nos permite realizar el efecto utilizando una única imagen. Esto permite ahorrar ancho de banda, y hace fácil la creación de miniaturas.
He aquí un ejemplo:

CSS:
<img class="zoomi" src="image.jpg" width="180">

Web Oficial Zoomi

Publicado por Nikko

Soy un diseñador y desarrollador web situado en la Patagonia Argentina. Disfruto testear y conocer nuevos scripts, además de experimentar nuevas técnicas tanto en impresión como en desarrollo web. Como propietario de Patagonia Creative, divido mi tiempo entre la empresa, trabajos para Pymes, ONG y Gob. ////////// Facebook / linkedin / xing

Nikko ha publicado 1098 posts en Xyberneticos - Leer todos mis articulos Nikko

  1. [...] Between once upon a time and ever after: dark fantasy author Stephanie Gunn wrote an interesting post today!.Here’s a quick excerpt [IMG zoomi.jpg] Zoomi es un ligero Javascript que posee la capacidad de permitirnos añadir a nuestras imágenes un efecto zoom muy bonito. Su utilización es realmente sencilla. Para utilizarla deberemos descargar por supuesto zoomi.js pero también necesitaremos de jQuery.Ver Demo Descargamos los script: zoomi.js y jQuery.js e incluir el siguiente código en nuestro Ahora a cualquier deberemos darle la clase = “zoomi” para que automáticamente se convierta en una ima [...]

  2. [...] XYBERNETICOS, encuentro como sucede a menudo con cosas útiles, en esta ocasión es Zoomi, un ligero Javascript [...]

  3. jeickelement - Gravatar

    jeickelement

    22-11-2007

    Permalink

    Lo bueno es que no Daña El resto de los Divs o Texto, Solo se mete Con las Imagenes

  4. [...] el inestimable Xybernetico, nos enseña a utilizar Zoomi, un ligero Javascript que permite añadir el efecto zoom a nuestras imágenes. Una herramienta [...]

  5. Lewis - Gravatar

    Lewis

    22-11-2007

    Permalink

    el ZOOMI esta bien, pero tu prima esta mejoooooorrr

    ;)



Nombre: (Necesario)

E-mail: (Necesario)

Website:

Escribe tu comentario: