Stanmx

Buscando la accesibilidad

Utilizando Shadowbox

Publicado en javascript el 31/10/09 a las 02:33 pm

Tengo más de un año utilizando el script de shadowbox.js para desplegar galerías, formularios u videos. Recientemente comencé a utilizar la última versión y me pareció lo suficientemente agradable para recomendarlo.

El script es práctico de utilizar y la versión más reciente me parece estar más ordenada.

Para utilizarlo basta descargarse la versión más reciente de Shadowbox.js y descomprimir todo en un folder, en mi caso lo llamo js. Posteriormente en el archivo que vamos a mandarlo llamar colocamos las siguientes líneas dentro de la etiqueta <head>:

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

El primero es el archive CSS donde definimos parte de su apariencia y el Segundo llamamos al archive JS que se encarga del funcionamiento.

En seguida agregamos lo siguiente:

<script type="text/javascript">
	Shadowbox.init({
		overlayColor: "#eee",
		language: "es",
  		players: ["img"]
  	});
</script>

El script requiere ser inicializado, por lo que colocamos dentro de una etiqueta <script> un Shadowbox.init(); el cual se encarga de dicha tarea.

Dentro colocamos algunas propiedades como es el caso de overlayColor el cual nos permite asignar un color que tendrá el background semitransparente alrededor de nuestra ventana de Shadowbox. language en el cual podemos declarar en qué idioma aparecerán los elementos. Y por ultimo un elemento importante, players al cual le especificamos de qué tipo de información mostrara nuestro Shadowbox, en este caso img por que será una imagen o imágenes. Podría ser también iframe para llama html, u otros, dependiendo lo que deseamos mostrar con shadowbox.

En seguida declaramos la imagen que nos interesa mostrar dentro de Shadowbox:

<a title="Hotel" rel="shadowbox" href="gallery/bienvenidos-01.jpg">
<img alt="Hotel" src="gallery/bienvenidos-01t.jpg" /></a>

Si se aprecia es una imagen como link, hasta ahí todo normal, sin embargo agrega un elemento extra dentro de la etiqueta <a>, me refiero a:

rel=”shadowbox”

Donde:

shadowbox manda llamar al script.

Y listo, basta hacer click en nuestra foto y se abrirá shadowbox mostrándonos la imagen.

Ahora, si lo que nos interesa es mostrar más de una foto como una galería. A nuestro rel=”shadowbox” habrá que agregarle un elemento que identificara a esas fotos como que forman parte de algo, esto seria así:

rel=”shadowbox[fotos]”

Donde:

[fotos] es el id que le hemos dado a esta galería y que todas las imágenes que pertenezcan a la galería, deberán llevarlo si queremos que aparezcan dentro de nuestro shadowbox.

El script puede ser bien aprovechado y costumizado. Lo pueden ver en acción en el siguiente link

Post relacionados

4 comentarios

Alex Rodrigo Silva

dijo el 07/01/10 a las 10:22 am

Exelente aporte, me has ayudado en mucho...
Muchisimas gracias =)

JSequeiros

dijo el 05/05/11 a las 05:57 pm

Excelente articulo.

Edgar

dijo el 18/12/12 a las 09:35 am

Muchas gracias me sirvio mucho.

fer

dijo el 07/08/13 a las 01:33 pm

muy buena info gracias x el dato

Aporta tu comentario

Tu Email no sera publicado.

Opcional.