Cambiando el visor de fotos del blog a Shadowbox: "How-To"

Hace cosa de un par de días os hablaba de lytebox, un visor de fotos bastante chulo y ligero, y os comentaba como utilizarlo en vuestro blog. Dándome unas vueltas por Internet (como no!), me topé por casualidad con shadowbox y me gustó bastante más; las imágenes se reescalan mas suavemente que con lytebox y tiene un aspecto bastante más profesional, a parte de que lytebox tiene ya unos añitos encima y no tiene ningún tipo de soporte como actualizaciones ni nada... Además es más sencillo para quien esta navegando poder guardar las imágenes. Con lytebox era demasiado trabajoso. Podéis seguir utilizando lytebox desde los enlaces que os dí, no he borrado los archivos, pero os recomiendo encarecidamente que os paséis a shadowbox.

Con shadowbox podemos utilizar todo tipo de contenido como imágenes, páginas web, archivos swf, quicktime, windows media... Basta con añadir el siguiente código a nuestro HTML justo encima de </head> (Editar -> Buscar o ctrl+F en firefox) como en el caso de lytebox:

<link href='http://dl.dropbox.com/u/14647580/shadowbox/shadowbox.css' rel='stylesheet' type='text/css'/>
<script src='http://dl.dropbox.com/u/14647580/scripts/jquery-1.4.4.min.js' type='text/javascript'/>
<script src='http://dl.dropbox.com/u/14647580/shadowbox/shadowbox.js' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({language: 'es',players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv']});
</script>

Si habíais seguido el anterior tutorial es recomendable anular los cambios hechos. Deberéis
tener activada la librería jquery, en el código de más arriba ya está puesto, si ya lo teníais no hace falta ponerlo otra vez. El funcionamiento es el mismo que el de lytebox: después de la URL de la imagen hemos de añadir rel="shadowbox", para más información podéis echar un vistazo a éste post como complemento, pero os hago un resumen:

Para poner imágenes sueltas:

<a href="URL de la imagen" rel="shadowbox"><img src="URL de la imagen" "/></a>

Para poner grupos de imágenes y pasar de una a otra con el ratón o el teclado:

<a href="URL de la imagen" rel="shadowbox[nombredelgrupodefotos]"><img src="URL de la imagen" "/></a>

Siendo [nombredelgrupodefotos] el nombre que le queráis dar a la galería.

Para poner un vídeo de Youtube: Podéis utilizar jyoutube para saber la url de la imagen.

<a href="URL del video de Youtube" rel="shadowbox" scrolling: no;" title="Título para el video"><img src="URL de una imagen de muestra del video" /></a>

Para poner un enlace a una página web:

<a href="URL de la página web" rel="shadowbox">nombre del enlace</a>

Por ejemplo una cosa así:

<a href="http://www.shadowbox-js.com" rel="shadowbox">así</a>

quedaría así.

Podéis ver instrucciones más detalladas aquí, como por ejemplo poner contenido mixto en una misma galería. Os recuerdo que es recomendable copiar el código en el bloc de notas antes de pegarlo para eliminar cualquier tipo de formato que pueda tener el texto y realizar una copia de seguridad de vuestra plantilla antes de hacer cambios. Si en vuestro blog estabais utilizando lightbox no hace falta que cambiéis nada, solamente añadir el código al HTML, ya que shadowbox es "retrocompatible" con lightbox.

Podéis ver unos ejemplos de lytebox vs shadowbox aquí (los dos enlaces con el efecto shadowbox en sí mismos):

Post con fotos de ejemplo de lytebox
Post con fotos de ejemplo de shadowbox

Si lo preferís, podéis descargarlo para alojar los archivos vosotros mismos en dropbox o en vuestro servidor preferido siguiendo estos enlaces, recordad que deberéis editar algunos archivos para que las rutas sean las correctas:

Web oficial de jquery
Web oficial de shadowbox

Perdonad por las molestias de éste cambio tan repentino. Espero que lo podáis utilizar fácilmente.