FanzyZoom: Ventanas modales sencillas

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.

<script type="text/javascript" src="URL_fancyzoom.js"></script>

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

<script type="text/javascript" charset="utf-8">
$(document).observe('dom:loaded', function() {
$$("div.photo a").each(function(el) { new FancyZoom(el); })
new FancyZoom('medium_box_link', {width:400, height:300});
new FancyZoom('large_box_link');
new FancyZoom('flash_box_link');
});
</script>

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@ y los detalles de su uso pueden verse en esta página.