ZoomImage

Como su nombre indica, agranda las imágenes: al hacer click sobre ellas, se abre una especie de "galería" con la imagen en cuestión, y una barra superior con flechas izquierda-derecha, para pasar de unas imágenes a otras.
En la barra inferior podemos poner la leyenda que queramos, relativa a la imagen. Además, las imágenes se pueden arrastrar...

No está mal... no es aparatosa y resulta bastante efectiva y rápida.

Es cosa de eyecon. En esta página podéis ver sus demos y las variantes existentes, así como descargar los scripts en cuestión. Podéis ver aquí mi Ejemplo

Para realizarla, necesitamos:

.- CSS-SCRIPTS:

<link href='http://.../zoomimage.css' media='screen' rel='stylesheet' type='text/css'/>



<script src='http://.../jquery.js' type='text/javascript'/>

<script src='http://.../eye.js' type='text/javascript'/>



<script src='http://.../utils.js' type='text/javascript'/>

<script src='http://.../zoomimage.js?ver=1.0.2' type='text/javascript'/>

<script src='http://.../layout.js?ver=1.0.2' type='text/javascript'/>

Ojito con la "class" porque, como veremos ahora en el HTML, si no coincide la clase asignada aquí con la que colocamos en el HTML, el zoom no funcionará en absoluto.

.- HTML: a colocar en el lugar de la plantilla donde deseeis el zoom. Aquí, insisto, respetad la clase y colocad la URL de cada imagen, así como la de thumb (la misma imagen, pero de tamaño más pequeño)

<a href="http://.../hierbas.png" title="Hierbas" class="lightsGal"><img src="http://.../hierbas.png" alt="Hierbas" width="40" height="40" /></a> <a href="http://.../Cabecera_Fade.png" title="Fade" class="lightsGal"><img src="http://.../Cabecera_Fade.png" alt="Fade" width="40" height="40"/></a> <a href="http://.../Spectral.png" title="spectral" class="lightsGal"><img src="http://.../Spectral.png" alt="spectral" width="40" height="40"/></a>