Shadowbox - JavaScript

Shadowbox es una aplicación Web desarrollada en JavaScript y CSS. Es altamente personalizable, está inspirada en el Lightbox y LightWindow.

Tiene soporte para los principales navegadores:
# Internet Explorer 6+
# Firefox 1.5+
# Safari 2+
# Chrome 1
# Opera 9+

para los formatos (QuickTime, Windows Media player, etc.), y los muestra sin necesidad de que el usuario salga de la página.

La aplicación utiliza un mecanismo que permite detectar automáticamente los plug-in, para determinar si el cliente es capaz de mostrar el contenido. En el caso de que falte el plugin requerido, Shadowbox puede mostrar un mensaje de error indicando el requerimiento.

descargas demostraciones

Shadowbox es altamente configurable, puedes consultar las diferentes opciones en el sitio oficial.

Uso: la forma más sencilla de configurar Shadowbox es incluir el código JavaScript y CSS en el documento (entre etiquetas head) y luego llamar a Shadowbox.init, ejemplo:

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
 Shadowbox.init();
</script>

- Para indicar que enlaces mostraran el shadowbox, es necesario utilizar la propiedad rel, pasándole como valor el nombre de la aplicación -> rel="shadowbox", ejemplo:

<a href="imagen.jpg" rel="shadowbox">click para ver la imagen</a>

---

Algunos ejemplos:

mostramos la ventana una vez se cargue la página completa.

<script type="text/javascript">
Shadowbox.init({
    skipSetup: true
});

window.onload = function() {

    // mostramos la ventana una vez se cargue la página completa
    Shadowbox.open({
        content:    '<div id="welcome-msg" style="color:#fff">mostrando solo texto ..</div>',
        player:     "html",
        title:      "el titulo",
        height:     150,
        width:      150
    });

};
</script>

Cargando páginas independientes

<a href="http://www.mi_sitio/contactame.html" rel="shadowbox;height=300;width=500">Contactame</a>

Algunas de las propiedades más usadas.

displayNav: false, // deshabilita el botón cerrar
enableKeys: false, // deshabilita el poder salir con el botón ESC
content: '<p>contenido</p>', // permite indicar contenido manualmente
player: "html", // indica el tipo de archivo a mostrar
title: "texto", // permite establecer el titulo de la ventana
height: 350, // alto de la ventana
width: 350, // ancho de la ventana
modal: true, // deshabilita la posibilidad de cerrar haciendo clic fuera