Shadowbox

14 oct

Hoy os vamos a presentar Shadowbox. Con Shadowbox podemos abrir una imagen, una galería de imágenes, una página web externa en HTML, una animación SWF o incluso videos de Youtube, Quicktime, Yahoo! video, Vimeo, etc.

Podemos conseguir un efecto muy elegante, en apenas 1 minuto de trabajo.

Para descargar la librería nos iremos a la página web oficial (shadowbox-js.com) y en la sección de Download, seleccionaremos como adaptador jQuery, seleccionaremos nuestro idioma y marcaremos todos los checkbox para tener compatibilidad al 100% con imagenes, videos, html externos, etc.

Simplemente tendremos que añadir la librería Shadowbox así:

<link href="../shadowbox-3.0.3/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript"> Shadowbox.init({ language: "es", players: ['img', 'html', 'iframe', 'qt', 'wmp', 'swf', 'flv'] }); </script>

Como vemos en este ejemplo, primero incluimos jQuery (jquery-1.4.2.min.js), y después la librería Shadowbox (shadowbox.js), tanto el archivo .JS como el .CSS con los estilos.

Una vez incluida la librería Shadowbox, simplemente tendremos que añadir el parametro rel="shadowbox" dentro de la etiqueta <a>

<ul>
<li><a href="foto1.jpg" rel="shadowbox"><img src="foto1_p.jpg" width="200" height="150" /></a></li>
</ul>

Si queremos hacer una galería de fotos, simplemente tendríamos que agregar el número de la galería detrás del shadowbox, por ejemplo el 0:

<ul>
<li><a href="foto1.jpg" rel="shadowbox[0]"><img src="foto1_p.jpg" width="200" height="150" /></a></li>
<li><a href="foto2.jpg" rel="shadowbox[0]"><img src="foto2_p.jpg" width="200" height="150" /></a></li>
<li><a href="foto3.jpg" rel="shadowbox[0]"><img src="foto3_p.jpg" width="200" height="150" /></a></li>
</ul>

Si quisiéramos hacer alguna galería más dentro de la misma página, podríamos poner shadowbox[1], shadowbox[2], etc. Tantas como galerías queramos hacer…

Os dejo los ejemplos que os he comentado, más un ejemplo de video en Youtube y enlace a página externa, en este caso a Google.

3 Respuestas a “Shadowbox”

  1. martin rodriguez 22 diciembre, 2010 at 17:51 #

    Hola Soy de Argentina, mira quiero preguntarte si hay posibilidad de tener una galería de imágenes con SHADOWBOX en un iframe. Y al tocar alguna IMAGEN abra con el SHADOWBOX en el la ventana padre. Mire tutoriales pero no anda nada.. por ahora no se que puede ser. Si me podes ayudar te agradecería. Mi email es martinrodriguez493@hotmail.com

  2. Emanuel 21 junio, 2011 at 6:25 #

    hola;
    podrias explicar como usar ese plugin de jquery con videos de vimeo y youtube?
    muchas gracias.

  3. José 24 agosto, 2011 at 20:45 #

    Hola! .. Estoy probando Shadow Box en mi servidor web local, pero no logro hacerlo funcionar.

    ¿Podeis darme pistas sobre porque puede ser?

    Gracias por adelantado, un saludo.

Agregar un nuevo comentario