A continuación realizare un tutorial de como crear una galería con esta ventana modal, que para mi gusto es adaptable a casi cualquier proyecto web.

Primero detallare las características que posee este plugin:

  • Plugin nativo de javascript.
  • Permite utilizar un adaptador para los frameworks más populares:  jQuery, Prototype, Dojo,  Mootols, Yahoo toolkit.
  • Permite crear galerías de: imágenes, videos flash, videos swf, quicktime, window media player y contenido externo via iframes o inline.
  • Posee soporte para una gran variedad de idiomas (incluye español obviamente).
  • Tiene una API bastante potente, por lo que puedes realizar casi cualquier cosa con este plugin.
  • Y el punto más importante por el cual lo utilizo bastante, es que se escala a cualquier tipo de pantalla, por lo que si lo ves en resoluciones más pequeñas no tendrás ningún problema.

Bueno seguimos con las instrucciones para la implementación:

Paso 1:

Descargar la librería desde el siguiente enlace y seleccionamos las siguientes preferencias:

  • En adaptador seleccionas jQuery, ya que es el framework que utilizaremos.
  • En el tipo de reproductor seleccionamos “images”.
  • Luego el lenguaje a utilizar, en nuestro caso “spanish”.
  • Y dejamos checkeado el soporte de CSS

Nota: si por alguna razón al hacer click en el icono de ZIP no te descarga nada, abre con otro explorador web, ya que una vez experimente problemas con chrome y la descarga no se realizaba.

Paso 2:

Descomprimimos el ZIP y copiamos los archivos a la carpeta donde estará alojado nuestro proyecto, luego comenzamos con la maquetación del HTML:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ejemplo Shadowbox-js</title>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<link href="js/shadowbox/shadowbox.css" rel="stylesheet" type="text/css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/shadowbox/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({ skipSetup: true});
$(function(){
	Shadowbox.setup("a.shadowbox", {
		gallery: "Galeria"
	});
});
</script>
</head>
<body>
    <div id="wrapper">
        <h1>Galeria con Shadowbox</h1>
        <a href="images/hd/1.png" class="shadowbox"><img src="images/th/1.png" width="120" height="60" alt="HTML 5 the future it's in my browser"></a>
        <a href="images/hd/2.jpg" class="shadowbox"><img src="images/th/2.jpg" width="120" height="96" alt="HTML the future is landing"></a>
        <a href="images/hd/3.jpg" class="shadowbox"><img src="images/th/3.jpg" width="120" height="169" alt="HTML 5 logo"></a>
    </div>
</body>
</html>

Explicación del HTML:

Primero comenzamos inicializando el shadowbox fuera de la función de jQuery, esto lo podemos realizar debido a que es una librería nativa de javascript.

Luego dentro $(function) accedemos a Shadowbox.setup, indicándole que todos los elementos con la clase shadowbox pertenezcan al conjunto “Galeria”, esto permitirá que solo esas imágenes serán mostradas en la ventana modal.

Otro punto es que utilizando esta técnica en vez de rel=”shadowbox” como lo indica la página del autor, es que podemos validar nuestro código en la W3C y además tener opciones personalizadas para cada galería que queramos.

Finalmente agregamos los enlaces que apuntaran a nuestras imágenes en alta resolución y dentro de él las imágenes que servirán de thumbnails para identificar cada imagen.

Explicación del CSS

Para implementar shadowbox solo debes señalar la ruta de shadowbox.css y será suficiente para tener todas las funcionalidades.

Demo: referenteweb.com/demos/shadowbox

Sitio web oficial: shadowbox-js.com