Zoomy

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

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