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>:
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:
$(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 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:
<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:
<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.
TABLA - FUENTES - FONTS
Disculpen las Molestias
No hay comentarios:
Publicar un comentario