10 plugins y técnicas jQuery para crear efectos con imágenes

Hasta que han estado disponibles librerías Javascript como jQuery y MooTools que permiten agregar animaciones y características interactivas a nuestras páginas sin requerir su recarga, el uso de Flash ha sido la única alternativa al alcance de muchos diseñadores y desarrolladores web.

En la actualidad, los frameworks Javascript jQuery y MooTools ofrecen  librerías de rutinas compatibles con la mayor parte de los navegadores (en los ejemplos de este post veréis que IE es un excepción en algunos casos ) y con una reducida curva de aprendizaje para los desarrolladores y diseñadores web, con funcionalidades más que suficientes para la mayor parte de los requerimientos de efectos gráficos con imágenes.

En este post comentamos 10 plugins y técnicas basadas en jQuery para crear efectos sobre imágenes: efectos de zoom para sitios web de fotografía, códigos para crear y guardar anotaciones en imágenes o para transformar  listas de imágenes en galerías fotográficas, visualización de subtítulos en imágenes con efecto de rollover, códigos para arrastrar imágenes, etc.

Todos ellos permiten incluir un cierto nivel de interactividad con las imágenes en nuestras páginas web, lo que nos hace pensar en la posibilidad de sustituir, en algunos casos, pesados códigos Flash por tecnologías de desarrollo web más sencillas como jQuery.

1. Efecto Zoom Out

En esta referencia encontraréis un completo tutorial para la cración de efectos de zoom en imágenes mediante jQuery. El efecto consiste en alejar la imagen sobre la que estamos pasando, en ese momento, el ratón. Este efecto podría ser utilizado en sitios web de fotografía o galerías de imágenes.

Demostración del efecto de zoom out

Descargar el código HTML, CSS y JavaSCript para crear el efecto de zoom out de imágenes

2. jCrop

Jcrop es un plugin jQuery que nos permite seleccionar y aplicar efectos a porciones de una imagen. Tiene diversas funcionalidades como, por ejemplo, la de permitir la visualización en un thumbnail de la porción de la imagen seleccionada con el cursos.

Cuenta con una muy completa documentación , así como ejemplos y demostraciones de los distintos efectos que se pueden lograr con las imágenes.

Ofrece soporte para Firefox 2+, Safari 3+, Opera 9.5+, Google Chrome 0.2+ y Internet Explorer 6+

Descargar Jcrop v0.9.8

3. Zoomer Gallery

El plugin Zoomer Gallery nos permite transformar fácilmente su listas de imágenes en galerías fotográficas con efectos de zoom similares a los que obtendríamos utilizando programación en Flash. El efecto consiste en aumentar el tamaño de una imagen que se muestra miniaturizada y, a la vez, generar una animación con el título de la misma.

Se trata de un código extremadamente liviano (2KB) y facil de usar, que se apoya, además de en jQuery, en CSS.

Cuenta con una documentación del código bastante clara y con una demostración del efecto bastante clarificadora.

Descargar el código de Zoom Galley

4. jQuery Plugin Captify

Captify es un plugin para jQuery desarrollado por Brian Reavis (@ brianreavis ) para visualizar subtítulos en imágenes de forma sencilla y con un efecto de rollover.  Está inspirado en ImageCaptions, otro plugin jQuery con capacidades similares.

Se ha probado en Firefox , Chrome , Safari e Internet Explorer. Tiene un peso de únicamente  2.3kb.

En esta página podéis ver ejemplos de su funcionamiento e información sobr el código.

Descargar el plugin jQuery para visualización de subtítulos.

5. Galería de diapositivas con jQuery

En este tutorial se describe como realizar una clásica presentación de diapositivas, en la que se incorporan efectos y animaciones en la transición de las imágenes.

Para el desarrollo del tutorial, y si queremos implantar esta solución en cualquier página web, tendremos que descargar dos plugins jQuery : uno para crear las  animaciones de lasimágenes y otro para generar  la sincronización en la transición de las diapositivas.

Aquí podéis ver la demostración de lo desarrollado en el tutorial.

En este enlace podéis descargar todo el código del tutorial sobre transiones de imágenes con jQuery.

6. Crear un muro de logotipos de patrocinadores con jQuery y CSS

En este tutorial, se explica de forma detallada, como crear un muro interactivo con logotipos de patrocinadores (u otro tipo de elementos gráficos). Este tipo de elementos contiene una gran cantidad de información que debe estar organizada con claridad y con énfasis en las de los patrocinadores, y no en otros elementos de su diseño.

Para el desarrollo se utiliza PHP , CSS y jQuery (plugin Flip jQuery).

En este enlace podéis ver la demo del código del tutorial.

Aquí podéis descargar el código para crear un muro de logotipos con PHP, HTML y jQuery.

7. jSquares

jSquares es un plugin jQuery que crea el efecto de una imagen con su descripción que aparece al pasar el ratón por una imagen en miniatura. Se trata de un efecto muy similar al de la rejilla de imágenes desarrollado en  www.ted.com.

Se ha comprobado su correcto funcionamiento con IE6+, FF 3+, Safari 3+ y Opera 10.

Aquí podéis ver funcionar el plugin con dos ejemplos distintos.

Descargar el código de jSquares.

8. Javascript ZURB anotación Plugin

En este caso tenemos un plugin jQuery para agregar y guardar fácilmente anotaciones en una imagen.

En la página del plugin teneís una completa guía de uso y una exhaustiva explicación del funcionamiento.

Descargar el plugin jQuery ZURB para crear anotaciones en imágenes.

9. Zoomooz

Zoomooz es un plugin  jQuery que permite hacer zoom de cualquier elemento de una página web o, incluso, de toda ella.

Su implementación es extremadamente sencilla, consistiendo, únicamente, en incluir la referencia al JavaScript en el HEAD de la página y luego añadir el código en la página con una clase CSS específica para el elemento sobre el que se quiere obtener el efecto de zoom. Este efecto es paremetrizable en cuanto al aumento del tamaño de la imagen, la duración, etc.

Se ha verificado su correcto funcionamiento con todos los navegadores, excepto IE…

En la página del plugin tenéis una demostración bastante clarificadora sobre su funcionamiento.

Descargar el código jQuery de Zoomooz.

10. iViewer

iViewer es un plugin jQuery que permite cargar y ver imagenes en un contenedor, incorporando la capacidad hacer zoom de una en concreto y arrastrarla mediante el ratón.

Se ha verificado su funcionamiento en ie6+, ff2+, google chrome, opera 9+ y safari.

En este enlace tenéis la demostración del funcionamiento del plugin con varios ejemplos.

Aquí podéis descargar los códigos para implementar el efecto.

Fuente: 10 jQuery Plugins and Techniques for Doing More with Images | Resources.

The 10 plugins y técnicas jQuery para crear efectos con imágenes by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.