Shadowbox con JQuery

A pesar de que me gustaba bastante utilizar lightbox, un plugin de JQuery eh de reconocer que desde que descubri Shadowbox en el blog de aNieto2k eh cambiado a utilizar Shadowbox para todo, desde las galerias de imagenes hasta para reproducir video flash, el uso de Shadowbox es extremadamente sencillo, basca con cargar los js y un css se puede utilizar en tantas cosas como uno quiera, desde mostrar imagenes, como mostrar video flash, Quicktime, Windows Media Player, ningun otro “box” tiene tanta facilidad de uso.

Aquí les enseño un pequeño tutorial para su uso con JQuery

Primero cargamos los archivos de Shadowbox

<link type="text/css" rel="stylesheet" href=".shadowbox.css"/>
<script type="text/javascript" src="jquery_con.js"></script>
<script type="text/javascript" src="shadowbox.js"></script>

Despues de cargar los archivos hay que activar shadowbox

<script type="text/javascript">
$(document).ready(function() {
var option = {
var option = {
resizeLgImages: true,
displayNav: true,
handleUnsupported : 'remove',
keysClose: ['c', 27]
};

Shadowbox.init(option);
});
</script>

Hay que tomar en cuenta la variable option el cual tiene varios parametros para configurar shadowbox, los parametro completos puedes checarlos aquí

Ahora simplemente tienes que indicarle a shadowbox que elementos son los que se mostraran en el box.

Para una imagen

<a href="imagen.jpg" title="imagen de muestra" rel="shadowbox"><img src="imagen.jpg" border="0" alt=""></a>

Para un video de YouTube

<a href="http://www.youtube.com/v/wbzLpteC8ng&autoplay=1" title="David Beckham" class="option" rel="shadowbox;width=405;height=340">YouTube</a>

Asi de sencillo funciona Shadowbox, simpremente agregando el tag rel=”shadowbox” uno puede indicar que elemento funcionará con shadowbox.

[Pagina oficial]

Anuncios