ShadowBox

Arriba  Anterior  Siguiente

ShadowBox es una librería desarrollada por Michael J. I. Jackson que se basa en la evolución de las librerías LightBox y la inserción de elementos player para todo tipo de elementos gráficos y multimedia.

 

Como tal esta librería está enteramente escrita en Javascript y CSS, y permite ser muy configurable en todos sus aspectos. El reproductor de Flash Video pertenece a Jeroen Wijering's (JW FLV Player).

 

Se ha dispuesto dentro de MBC de tal forma que sea compatible con otras librerías Java externas y ha sido verificado con:

Yahoo User Interface Library (YUI)
Ext
Prototype
jQuery
Mootools
Dojo Toolkit

 

Se ha verificado su compatibilidad con los exploradores:

FireFox 1.5+
Safari 2+
Opera 9+
Internet Explorer 6+

 

En el resto de los casos como Flock, K-Meleon, Maxthon, Conqueror, Netscape se han realizado pruebas y operan, si bien el creador no garantiza su plena compatibilidad.

 

ShadowBox ha sido implementada en MBC adaptando ciertos parámetros de forma automática, como es el idioma que se configura directamente por la tabla Idioma de la web.

 

Estos son los reproductores insertados y sus archivos permitidos

 

Reproductor

Contenido y archivos

img

Todo tipo de archivos jpg, gif y png. Sea cual sea su tamaño, dispone también de funciones de zoom, ajuste y movimiento de imágenes

swf

Archivos Adobe/Macromedia Flash (fla compilados) soporta un valor de ajuste de fondo de la caja

flv

Reproducción de videos generados con Adobe/Macromedia Flash video (similares a los que se usan en YouTube)

qt

Archivos QuickTime de Apple

wmp

Archivos reproducidos por Windows Media Player, depende de la versión de explorador y windows para aceptar todo tipo de extensiones y codecs.

iframe

Visualización de elementos HTML incrustados en cajas. Muy útil para insertar elementos como YouTube, Google Video, Yahoo Video, Google Maps, etc...

html

Inyecta directamente contenido HTML a la caja, permitiendo la creación por el usuario de formularios o cualquier otro archivo HTML (puede contener Javascript, CSS o cualquier otro tipo disponible en HTML)

 

Marcación genérica para usuarios avanzados del uso de ShadowBox en HTML:

 

Usted dispone de un link como este (sea cual sea su contenido)

<a href="myimage.jpg">My Image</a>

Agregar rel="shadowbox" para implementar el uso de la librería y ya funciona.

<a href="myimage.jpg" rel="shadowbox">My Image</a>

Si desea agregar funciones de ajuste directo agregar separados por (;) punto y coma los valores correspondientes, ejemplos:

<a href="mymovie.swf" rel="shadowbox;height=140;width=120">My Movie</a>

En este ejemplo forzamos a abrir shadowbox con un ancho y alto prefijado

<a href="myimage.jpg" rel="shadowbox" title="My Image">My Image</a>

En este ejemplo insertamos un título a la imagen que será mostrado en la parte inferior

<a href="beach.jpg" rel="shadowbox[Vacation]">The Beach</a>

<a href="pier.jpg" rel="shadowbox[Vacation]">The Pier</a>

En este ejemplo creamos una galería [Vacation] que permitirá al usuario navegar de una imagen a la otra sin cerrar y volver a abrir el elemento

<a rel="shadowbox[Mixed];options={counterType:'skip',continuous:true}" href="vanquish.jpg">jpg</a>

<a rel="shadowbox[Mixed];width=520;height=390" href="caveman.swf">swf</a>

<a rel="shadowbox[Mixed];width=292;height=218" href="kayak.mp4">movie</a>

<a rel="shadowbox[Mixed]" href="index.html">iframe</a>

En este ejemplo creamos una galería [Mixed] con diferentes tipo de archivos y que permitirá al usuario navegar de un elemento a la otro sin cerrar y volver a abrir este

Para los usuarios que deseen profundizar en el uso de esta librería y quieran manejar la API recomendamos visitar el sitio: http://www.mjijackson.com/shadowbox/doc/api.html

Utilice CSS adicionales para generar áreas DIV que mejoren el posible aspecto de su galería agregando marcos a las fotos.