JMiur [E]

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

43 comentarios:

Σ=o) Pau  

Decirte que me fascinaron es poco :D
Me encanta sobre todo para los archivos swf, ya que en la voz y hace poco en mi balcón publiqué uno con el sistema tuyo para poner los juegos flash.
Voy a probarlo sin duda, pero iré con calma pues me encanta ponerle cosas a mi blog, pero aveces me recargo mucho :$ jejee y con los post que pones es tentador jijiji ^_^

besotes ronroneados
pd: te dejo un trozo de torta de trufa pues el sábado fue mi cumple ;)

Responder
JMiur  

Pau: los dos sistemas son buenos y este es interesante; sobre todo, porque puede combinarse con el otro y es un script bastante pequeño.

¿Trufas? EPA!!!!!!!!! Feliz cumpleaños :D

Responder
Anónimo  

Jmiur, hay alguna forma de poner este tipo de ventanas, pero sin agregarle el ID a cada imagen,

Porque yo tengo una web de imagenes, pero ya estan todas publicadas y son miles, y seria muy trabajoso editar cada una.

Tenes alguna idea?

Leandro

Responder
Gem@  

jajajaja ¿sabías que me encantaría? el sistema es igual al de la página que me mostrabas el otro día me gusta, me gusta y me gusta :)

Responder
Gem@  

Yo siempre rizando el rizo y pregunto...
¿Hay alguna forma de conseguir el marco con transparencia? eso sería el no va más.

Responder
JMiur  

No se me ocurre ninguna forma de automatizar tanto las cosas. En general, siempre hay que agregarle algún atributo, ya sea un ID, una clase o REL.

Gem@:
Sabía que eso te gustaría :D
Por lo que leí, lo que intentaron hacer es simular la estética de las Macs y realmente queda muy bien.
¿Transparencias? Como el marco es una serie de imágenes (muchas) imagino que sería posible modficarlo. Pero, sólo imagino ... digamos que es parte de las ilusiones :D

Responder
Anónimo  

Gracias por el tip es muy pero muy bueno!
Por otro lado mira este incrustado es algo sorprendente(para mi que no se mucho) por mas que le busque no encontre algun url del video. esta en la parte derecha de esta web-
-http://akihabarablues.com/comunidad/

Responder
JMiur  

Por lo que vi, eso es un gadget de Google: Watchmen - New Frontiersman Gadget ... creo :D

Responder
Sunk  

Que buen post pero que te crees no pude O_o, ya me di por vencido, que gran blog mis respetos

Responder
Nico  

Me gustó, especialmente el último ejemplo, y eso que soy medio reacio a ver estas cosas :P

Usarlo, es otra cosa, pero para juegos me gustó.

Responder
JMiur  

Lentamente, iremos cambiando su ascetismo geek. Ya verás. en un año o antes, veremos a ZF llena de gifs animados y textos parpadeantes :D

Responder
Bonzu Pipinpadaloxicopolis III  

El FanzyZoom soporta iframes??

Responder
JMiur  

Funciona con cualquier cosa que ya esté en el mismo blog. No usa Ajax así que no carga páginas externas.

Responder
Bonzu Pipinpadaloxicopolis III  

¿Tampoco es posible agregarlo directamente a la plantilla?

Lo intenté, pero no funcionó.

Gem@ se refiere los bordes? porque esos ya tienen transparencias solo que como es oscuro el blog no se notan.

Responder
Gem@  

Me resultó bien, estoy batallando con el texto ahora mismo. Sobre la transparencia no Bonzu, precisamente sobre fondo oscuro se notaría más. El marco es blanco y como decía J.Miur son imágenes.

Responder
Bonzu Pipinpadaloxicopolis III  

las transparencias se ven perfectamente en un blog "blanco", es un efecto oscuro en las esquinas, que no se aprecia por el fondo de vagabundia, checalo y verás de que hablo, aquí verás que en las partes blancas se ve una sombra que lo rodea, y las oscuras no se nota.

También en esta imagen que saqué del script
http://img141.imageshack.us/img141/6193/33806775kh5.png

Responder
Gem@  

Bonzu lo que tu llamas transparencia es un efecto llamado shadow (sombra)la transparencia es una capa que al añadir un color distinto al fondo "transparenta el fondo" como esto

Responder
Bonzu Pipinpadaloxicopolis III  

Es un efecto sombra con transparencia, porque sin transparencia se notaría en cualquier color de blog.

Te refieres al borde no?

Responder
Gem@  

En este caso en concreto ni el borde ni el marco tienen transparencia el marco es blanco y la sombra gris, si lo tuviera en el ejemplo de tu blog el lateral derecho dejaría ver el fondo oscuro de tu sidebar y se muestra blanco.
No te quito ni te doy la razón, simplemente para mi transparencia, opacidad y sombra son tres cosas distintas ;)

Responder
Bonzu Pipinpadaloxicopolis III  

Yo entiendo que por transparencia es cuando se deja ver lo que hay detrás pero al mismo tiempo superpuesto.

Por opacidad un efecto borroso, desenfocado pero también superpuesto y semi transparente.

Sin embargo veo que en programas de edición de imagen la transaparencia es equivalente a opacidad.

No se si esté equivocado, pero hace falta una aclaración.

Responder
Gem@  

"Yo entiendo que por transparencia es cuando se deja ver lo que hay detrás pero al mismo tiempo superpuesto" aquí no deja ver lo que hay detrás, se muestra una imagen opaca.
Quizás J.Miur tenga esa aclaración y aclare las dudas :)

Responder
JMiur  

Es casi una charla semántica porque transparente y opcaco son los dos extremos del mismo estado; si un objeto deja o no deja pasar la luz :D

Así que, para echar leña al fuego diría que en realidad, el borde es traslúcido ;)

Los bordes que usa el script son PNGs transparentes no son opacos. El color de esa especie de sombreado es un gris muy ténue así que es poco visible en fondos grises e incluso en los blancos se ve poco.

Responder
LuzdeLuna  

JMiur, el script de la plantilla no me dejaba abrir el blog con IE! me daba error y se cerraba hasta que lo retiré.
con Fire todo bien hasta las pruebas que hice.
Le pasó a algún otro??

Responder
JMiur  

Sí, Luz. Así es. Es raro. Estoy viendo si puede solucionarse. Creo que una posibilidad es colocarlo antes de </body> al final de la plantilla.

Responder
Gem@  

jajajaja me mataste con tu argumento :O
Son transparentes pero no se transparentan.

Responder
JMiur  

Jajajajaaja :D

Para evitar porblemas yo, prefiero los opacos. Más aún: blanco y negro, así no hay dudas :D

Pregunta: no veo que en tus pruebas haya problemas con IE7, ya son varios los que dicen que se produce un error, lo he verificado y es cierto; parecería que no siempre es así lo cual me confunde aún más.

Responder
Shark_Bloody  

Hola JMiur, ¿se podria cargar TODO en un post, osea, prototype, scriptaculus, fancyzoom y el script con las propiedades de la clase photo?

La verdad es que lo eh intentado, pero no me funciona; ¿seria mucha molestia mandarme un mail con un ejemplo?

Espero tu respuesta a sharkblooder@gmail.com gracias :)

Responder
Bonzu Pipinpadaloxicopolis III  

Quizá traslucido es una definición mas acertada, pero no se porque la opacidad es equivalente a transparenciaen programas de edición de imágen.¿Lo han notado?

Responder
Gem@  

Aceptamos pulpo como animal de compañía (yo me entiendo) :)

Es verdad que problemas con Explorer no he notado, si esos feos bordes grises que viste que no es poco.
No creo que los cambios que yo hice al script (el tuyo) sean la causa de no-problemas con Explorer pero por si caso te lo envié para que lo compruebes.

Responder
Bonzu Pipinpadaloxicopolis III  

Creo que ya se acaba la leña.

Responder
Gem@  

Bonzu ¿miraste con Explorer? anoche me di cuenta que la imagen a tamaño real se visualiza sin hacer click en la miniatura, era tan tarde que pensé decírtelo hoy.

Responder
JMiur  

No, Shark_Bloody. No se pueden cargar Prototype + Scriptaculus en un post. Se necesita que estén en el head del sitio.

El tema de IE es un problema del mismo IE, un bug que perdura desde siempre ¿Recuerdas los problemas que tuvimos con mootools, Gem@? Es lo mismo. Depende de ciertas condiciones, el navegador colapsa por completo.

Responder
Bonzu Pipinpadaloxicopolis III  

Gem@, decía Internet Explorer no puede abrir tal página, error en la carga o algo similar.

Responder
Gem@  

Y es una pena porque precisamente mootools es una maravilla, hay limitaciones respecto a librerías.
jQuery es mucho más conocida que ninguna otra creo incluso creo que Scriptaculous pero incompatible totalmente.
Hay que inclinarse por una u otra si no queremos conflictos :(

Responder
Gem@  

Si, así es Bonzu decía esos errores y se veía la imagen grande a la vez que la miniatura.

Responder
Bonzu Pipinpadaloxicopolis III  

También en Firefox sucedía eso de mostrar las imágenes antes de tiempo, pero porque no se completó la carga.

Responder
Arpa  

Hola JMiur,

Es un script fascinante, como todo lo que nos cuentas. Pero tengo un problema: no soy capaz de ponerlo en la sidebar ni en un wrapper que tengo justo encima de la sidebar. Quiero poner un botón "Contacta" y que se abra la ventana con la información de contacto.

Lo bueno del caso es que en los posts funciona perfectamente.

Verás lo que quiero decir en: http://arpabellezaprofesional.blogspot.com/

Sabes cómo lo podría solucionar?

Gracias de antemano.

Responder
Gem@  

Mírale que bien le funciona a Alpa con los dos navegadores, y eso que no tiene actualizada las librerías de Google API :) :) :)

Responder
Gem@  

Ejem! quise decir Arpa, sorry (era la emoción)

Responder
JMiur  

Arpa:
Me parece que el problema es que hay dos con el mismo ID. Deja sólo el de la sidebar y quita el otro. Veamos que pasa con uno solo. Los IDs deben ser exclusivos.

Gem@:
Eso veo XD

Responder
Arpa  

Pero qué buenos sois!!!

Ya funciona.

Muchas gracias!!!

Responder
Anónimo  

Habría alguna manera de hacer que se oscureciera el fondo tal y como pasa con litebox o lightwindow?

Con plantillas claras parece que se distrae un poco la atención.

Responder
JMiur  

No sabría decirte si eso es posible.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR