FanzyZoom: Ventanas modales sencillas

JMiur

FanzyZoom es una variante simplificada de los scripts que permiten mostrar contenido en ventanas modales. A diferencia de otras, no sólo es extremadamente simple sino que se basa pura y exclusivamente en ocultar y mostrar elementos por lo que lo que su uso es compatible con otros scripts.

La única condición para utilizarlo es que tengamos Prototype y Scriptaculous, dos librerías que podemos agregar con facilidad desde Google API.

Aunque el código y los ejemplos avanzados pueden verse en Github, veamos la forma de usarla en Blogger.

Para hacerlo fácil, este ZIP

contiene el script y las imágenes que utiliza que ya han sido alojadas en ImageShack. Si queremos cambiarlas o realojarlas, deberemos editar el archivo JS. Una vez descomprimido, lo alojamos en un servidor y lo agregamos a la plantilla, antes de </head>:

Aunque tiene muchas formas de personalizarse, lo más sencillos es agregar esto inmediatamente después:

De esa manera, definimos los tamaños por defecto de las distintas ventanas y establecemos una clase photo para asociarla.

Hecho eso, podremos aplicar el script a cualquier DIV, ya sea que contenga textos, imágenes e incluso contenido de Flash.

Este, sería el código de un ejemplo con imágenes:

<div id="ejemplo">
<div class="photo">
<a href="#nombreID_1"><img src="URL_miniatura1" /></a>
</div>

<div class="photo">
<a href="#nombreID_2"><img src="URL_miniatura2" /></a>
</div>
<div id="nombreID_1"><img src="URL_imagen1" /></div>

<div id="nombreID_2"><img src="URL_imagen2" />
<p id="nombreID_2_caption">el texto a mostrar optativo</p>
</div>
</div>

Algo similar podemos hacer para mostrar textos:

<div id="otroEjemplo">

<a href="#medium_box" id="medium_box_link">Modelo Medium Box</a>
<a href="#large_box" id="large_box_link">Modelo Large Box</a>
<div id="medium_box">

....... el contenido .......
</div>
<div id="large_box">
....... el contenido .......
</div>
</div>

Y para abrir archivos SWF:

<a href="#flash_box" id ="flash_box_link">ABRIR ARCHIVO SWF</a>

<div id="ultimoEjemplo">
<div id="flash_box">
<object width="ancho" height="alto" id="movie" type="application/x-shockwave-flash" data="URL_archivo.swf">
<param name="movie" value="URL_archivo.swf" />

<param name="wmode" value="transparent" />
<param name="allowfullscreen" value="true"/>
<param name="allowScriptAccess" value="always" />
</object>
</div>
</div>

ACTUALIZACIÓN:

Como parece que el script, a veces, suele causar conflictos con Internet Explorer, he decidido sacar los ejemplos del post.

Este script tiene también una alternativa que descubrió Gem@