Zoom de las imágenes v2

15 de octubre de 2011. Actualizo este post para indicar que Google ha incluido Lightbox activado por defecto para todos sus usuarios Blogger. Esto interfiere con Shadowbox, salvo que lo desactivemos en el apartado de configuración de nuestro blog:

Este es el segundo método que he usado para lograr el zoom de las imágenes, en los posts publicados a partir de julio de 2011, mientras que la utilidad BrightBox sigue funcionando de forma complementaria en los posts más antiguos. Ahora uso el JavaScript Shadowbox.js 3.0.3 de Michael J. I. Jackson ganando en opciones y estabilidad.

Shadowbox viene con unos cuantos archivos que he hackeado, primero por ser necesario para hacerlo funcionar en blogger, y segundo para activar un par utilidades.

Los archivos de Shadowbox que estoy usando son: la hoja de estilo shadowbox.css, el JavaScript shadowbox.js y las imágenes de control de los zoom loading.gif, close.png, next.png, previus.png, play.png y pause.png. También utilizo la librería json2.js para el hack que explico abajo. Todos ellos deben alojarse en un servidor externo a blogger, yo uso Google sites. Pero antes aplicaremos los hacks.

Es necesario indicar el path absoluto de las imágenes de control de los zoom, indicadas en el archivo shadowbox.css de hojas de estilo, para que Shadowbox funcione en Blogger. Añadir el resto de la URL donde están alojadas las imágenes, en rojo en el ejemplo siguiente:

#sb-loading-inner span{background:url(http://sites.google.com/shadowbox/loading.gif) no-repeat;padding-left:34px;display:inline-block;}
... ... ...
#sb-nav-close{background-image:url(http://sites.google.com/shadowbox/close.png);}
#sb-nav-next{background-image:url(http://sites.google.com/shadowbox/next.png);}
#sb-nav-previous{background-image:url(http://sites.google.com/shadowbox/previous.png);}
#sb-nav-play{background-image:url(http://sites.google.com/shadowbox/play.png);}
#sb-nav-pause{background-image:url(http://sites.google.com/shadowbox/pause.png);}

Este hack de Manfersite permite ajustar las opciones de Shadowbox de forma individual en cada una de las imágenes, objetos en realidad. Añadir el siguiente código en rojo a shadowbox.js

S.applyOptions=function(options) {
  lastOptions=apply({}, S.options);
  if (typeof options=="string")
    try {
      options=JSON.parse(options);
    }
    catch(e) {
      // not valid JSON
    }
  apply(S.options,options);
};

Para asegurar el funcionamiento del hack anterior en versiones de navegadores no muy recientes, es necesario añadir la librería json2.js al conjunto de archivos de Shadowbox.

Este hack (en rojo) al principio del archivo shadowbox.js protege el origen de Shadowbox haciendo que solo funcione si es llamado desde el blog BikerTB:

if(window.location.host!="bikertb.blogspot.com"){exit;}
/*
 * Shadowbox.js, version 3.0.3
 * http://shadowbox-js.com/
 *
 * Copyright 2007-2010, Michael J. I. Jackson
 * Date: 2011-05-14 15:40:54 +0000
 */
(function(window,undefined){
    var S={version:"3.0.3"};
    var ua=navigator.userAgent.toLowerCase();

Hacks aplicados, ya podemos subir todos los archivos a un servidor, por ejemplo a Google Sites.

Ahora hay que llamar a los archivos, abajo señalados en rojo, desde la cabecera del blog. Además se pueden indicar varias opciones de funcionamiento, BikerTB tiene configuradas las siguientes, en azul:

<link href='http://sites.google.com/shadowbox/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='http://sites.google.com/shadowbox/json2.js' type='text/javascript'></script>
<script src='http://sites.google.com/shadowbox/shadowbox.js' type='text/javascript'></script>
<script type='text/javascript'>
   Shadowbox.init({
     continuous: true, // paso automático de imágenes
     slideshowDelay: 4, // intervalo del paso
     overlayOpacity: 0.8 // opacidad del fondo oscuro
   });
</script>
</head>

En BikerTB Shadowbox se usa de las siguientes formas:

Para hacer zoom de una imágen individual:
<a title="Título que presentará la imágen" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox" >
    <img src="http://servidor.com/blog/imagenPequena.jpg" /></a>

Para hacer zoom de varias imágenes consecutivas en carrusel:
<a title="Título que presentará la imágen 1" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox[grupo-1]" >
   <img src="http://servidor.com/blog/imagenPequena.jpg" /></a>
<a title="Título que presentará la imágen 2" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox[grupo-1]" >
    <img src="http://servidor.com/blog/imagenPequena.jpg" /></a>

Zoom de una imágen que solo se verá al activar un carrusel de imágenes:
<a title="Título que presentará la imágen N" href="http://servidor.com/blog/imagenGrande.jpg" rel="shadowbox[grupo-1]" ></a>

Zoom de los mapas. Estos no se redimensionan, siendo necesario mover la imágen para verla completamente:
<a title="Mueva la imágen con el ratón para verla completamente" href="http://servidor.com/blog/imagenGrande.jpg" 
    rel='shadowbox; options={"handleOversize":"drag"}' ><img src="http://servidor.com/blog/imagenPequena.jpg" /></a>

Referencias: |Google Sites|Manfersite|Librería json2.js|Web Shadowbox.js|
Hardcopy de la web Shadowbox.js a 5-jul-2011: [Home][Download][Support][Usage][Options][API][FAQ][Forum]