JMiur [E]

Otra más ... ya son muchas las ventanas modales y sumamos a Zoomy que es un pequeño script que permite mostrar imágenes y posee algunas caracteristicas singulares.
  • crea un thumbnail de manera automática así que sólo necesitamos la imagen original
  • permite el agregado de captions opcionales, textos a ser mostrados dentro de la ventana modal
  • es posible crear ventanas que pueden ser arrastradas
A decir verdad, no me convence mucho (por no decir nada) pero, cumplo con el pedido de explicarlo.

Para utilizarlo se requiere el framework Prototype y Scriptaculous (effect.js y dragdrop.js) todo eso, si no lo tenemos en la plantilla, lo podemos agregar mediante las APIs de Google. A mi entender, esta es la forma más sencilla de añadir estos scripts en Blogger, colocamos lo siguiente antes de </head>:
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;, &quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
Luego, agregamos el script que podemos descargar desde la misma página en formato ZIP . Allí encontraremos un demo y también las imágenes necesarias (close.gif y zoomy.jpg).

Como para utilizarlo se requiere llamarlo mediante un código que Blogger malinterpreta, este otro ZIP contiene el script modificado. Alojamos los archivos en un servidor y lo cargamos:
<script src='URL_zoomy.js'></script>
Por ultimo, el CSS que podemos agregar directamente en la plantilla.

<style>
.zoomy, .zoomy2 {
float: left;
width: 100%;
}
.zoomy li, .zoomy2 li {
display: inline;
float: left;
list-style: none;
height: 100px;
margin-bottom: 5px;
margin-right: 5px;
width: 150px;
}
.zoomy a, .zoomy2 a {
display: block;
background-position: center center;
height:100px;
text-decoration: none;
text-indent: -9999px;
width: 150px;
}
#zoomy {
background: #000;
border:1px solid #B3BEAD;
color: #fff;
line-height: 100%;
padding: 5px;
position: absolute;
}
#zoomy p {
margin: 0;
padding: 5px 5px 10px 5px;
position: relative;
}
#close {
background: url(URL_closes.gif) no-repeat;
cursor:pointer;
height: 12px;
position: absolute;
right: 5px;
width: 12px;
}
</style>

El script es limitado ya que debemos llamar a una función cada vez que lo utilizamos:
<script>
new Zoomy(element,{[opciones]});
<script>
donde las opciones son:
  • appearDuration el tiempo del efecto fade (por defecto es 0.5 segundos)
  • closeButton por defecto es false, poner en true para mostra el botón cerrar
  • draggable por defecto es false, poner en true para permitir que se arrastren
  • hideCaption por defecto es false, poner en true para mostrar textos
Lo usamos de esta manera::
<ul class="zoomy">
<li>
<a href="URL_cualquiera" style="background-image: url(URL_imagen1)" title="Demo 1">Ejemplo 1</a>
</li>
<li>
<a href="URL_cualquiera" style="background-image: url(URL_imagen2)" title="Demo 2">Ejemplo 2</a>
</li>
</ul>
El problema es que debemos definir esa función y el CSS cada vez que lo vamos a aplicar. En estos demos hay dos posibilidades, dos listas, una llamada zoomy y la otra zoomy2. Si quisiéramos otras, habría que agregarlas. Eso es lo que lo hace poco flexible y no muy recomendable aunque la idea en si misma es buena


En resumen, no me parece nada sencilla de utilizar.

7 comentarios:

C.C.S  

Esta bueno gracias hoy tambien publico Gema algo similar que esta muy bueno! http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

SAludos !!

Responder
José GDF  

El visor de imágenes que hace un tiempo nos presentaste es más fácil de implementar y de usar. Sólo añadir el rel="thumbnail" y quitar el /h-1600 de la cadena de la URL de la imagen si está alojada en Blogger, y ya está.

Lo tengo puesto desde hace un tiempo en mi blog y en algunos en los que colaboro.

De hecho se trata exactamente del mismo que nos dice C.C.S más arriba. Lo acabo de comprobar.

Sin embargo, aunque en principio no pueda resultar demasiado útil, me ha llamado la atención de que se puede arrastrar en los ejemplos de abajo.

Responder
Graciela  

si no te convence a vos, tampoco a mi :)...buen día!!!

Responder
Claudio  

La presentación final es buena, se ve limpia y minimalista.

A mi me gusta,

Gracias

Responder
Gem@  

No está mal, produce un efecto muy suave y original con el efecto Drag and Drop
Sobre lo que publiqué fue en Twitter es un muy buen artículo de Line 25 sobre ventanas modales con jQuery.
Hay que tener cuidado a la hora de escoger porque Prototype y jQuery no son buenos amigos y crean conflictos entre sí, menudo trabajo cuando posteo sobre jQuery necesito un blog exclusivamente para cada ejemplo :(

Responder
JMiur  

Hay modelos para todos los gustos. Nunca los califico, sólo los muestro para que cada uno decida. Esta en particular es agradable y tiene efectos interesantes pero es engorrosa de usar.

Responder
HUGO  

es verdad,es engorroso comparada con las ventanas anteriores,un saludo.

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