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

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

• Demo 1
• Demo 2

• Rubix Cube
• Frogs

En resumen, no me parece nada sencilla de utilizar.