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.
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:
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.
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.
