Shadowbox
Shadowbox es una aplicación en línea para el visonado de medios web más populares (JPG, GIF, PNG, Flash, QuickTiem, Windows Media Player, Flip4Mac, HTML, PHP, ASP, etc..).
Shadowbox está escrito totalmente en JavaScript y CSS siendo altamente configurable y editable. Shadowbox permite, a los desarrolladores de páginas web, mostrar una amplia variedad de medios de comunicación en los principales navegadores, sin tener que visitar las páginas web externas que poseén los medios.
Internet Explorer 6+ 
FireFox 1.5+ 
Google Chrome 1 
Safari 2+ 
Opera 9+
Aunque Shadowbox también destaca como un recurso inmejorable para mostrar elementos dentro del propio sitio web, de forma personalizada para sus múltiples páginas web.
Características de Shadowbox
Estándares Internacionales: Shadowbox es validado mediante el estándar internacional web HTML de w3.org. Sin Marcos: Aunque Shadowbox tiene la capacidad de adaptarse a cualquier marco de JavaScript, y es capaz de ejecutarse como una aplicación independiente, dando al desarrollador de una gran flexibilidad. Flexible: Shadowbox soporta los formatos más populares de medios de publicación web, incluyendo imágenes, QuickTime, Windows Media Player, Flash, vídeo de Flash, HTML, e incluso las páginas web externas. Personalizable: Soporta una gran cantidad de opciones que hacen que Shadowbox sea altamente configurable y editable. Si no te gusta la manera en que funciona algo, puedes cambiarlo. Ordenado y compacto: El código de Shadowbox es limpio, modular y compacto.
Ejemplos de aplicaciones para Shadowbox
Shadowbox como galería de imágenes
Shadowbox como reproductor de videos de YouTube
Shadowbox y GoogleMaps
Llamada a las librerías y el objeto Shadowbox
Guadamos las librerías que hemos descargado [ Descargar Shadowbox.js ] en la carpeta shadowbox, y las llamamos tanto las css como los ficheros javascript:
<link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" mce_href="shadowbox/shadowbox.css" />
<script type="text/javascript" src="shadowbox/shadowbox.js" mce_src="shadowbox/shadowbox.js"></script> <script type="text/javascript" src="shadowbox/shadowbox-funciones.js" mce_src="shadowbox/shadowbox-funciones.js"></script> <script type="text/javascript"><!-- Shadowbox.init(); // --></script>
¿Cómo puedo abrir Shadowbox desde una película de Flash?
Usando ActionScript y la función getURL para llamar al código de Shadowbox. La forma más fácil es definir una función de JavaScript de llamada similar a la siguiente función:
<script type="text/javascript"><!--
function openShadowbox(content, player, title)
{
Shadowbox.open({
content: content,
player: player,
title: title
});
}
// --></script>Puedes poner esta función en la etiqueta head, o bien incluirlo como archivo externo mediante un script. Luego, en la película Flash se utiliza getURL para llamar a su función de llamada del Shadowbox:
getURL("javascript: openShadowbox( ′movie.swf′, ′swf′, ′Title′)");¿Cómo puedo abrir Shadowbox desde un iframe?
Cuando un iframe se coloca dentro de otra ventana, esa ventana se convierte en la ventana principal de ese iframe. Para ejecutar JavaScript en la ventana padre desde el interior de un iframe, debes encontrar la manera de hacer llamadas a objetos generados en la ventana padre. Por lo tanto, se puede utilizar el código siguiente dentro del documento iframe para acceder al objeto Shadowbox que se encuentra en la ventana padre:
var = Shadowbox window.parent.Shadowbox;/ / Hacer lo que quieras con Shadowbox aquí
Una vez que se tiene acceso al objeto Shadowbox, podemos utilizarlo como se haría normalmente. Todas las acciones tendrán lugar en la ventana principal. Para utilizar Shadowbox dentro de un iframe, debemos incluir el código del Shadowbox en la parte superior del documento dentro del iframe.
¿Cómo puedo cerrar un Shadowbox desde el propio Shadowbox?
Para cerrar el objeto Shadowbox debemos quenerar una función de llamada en JavaScript en la ventana padre o superior que generó el objeto Shadowbox original, ya que un objeto Shadowbox puede llamar a otro objeto Shadowbox.
<script type="text/javascript"><!--
function closeShadow()
{
Shadowbox.close();
}
// --></script>Enlaces de Shadowbox.js: [ Descargar Shadowbox.js ] [ DEMO Shadowbox ] [ API Shadowbox ]
Otros Artículos relacionados con Shadowbox: Shadowbox y Google Maps - Galería de Imágenes con Shadowbox - Shadowbox problemas con IE6
Comentarios Total 24 comentarios
Silvia - excelente
Publicado: 12/03/2010 15:07:31
hola, me ha encantado esta ayuda, me parece muy útil la posibilidad de poder crear formularios, videos... en una ventana emergenete de esta forma.
Lo probaré en cuanto pueda.
Friki Web - muy bueno y simple
Publicado: 18/03/2010 18:23:52
Mucho más sencillo que la página web de shadowbox, ahora si que me he enterado. gracias
ILovePhp - Ayuda Shadow
Publicado: 05/04/2010 11:53:46
gracias
Javier - Abrir el Shadowbox al entrar en una web
Publicado: 14/04/2010 16:15:26
Hola,
Al ver que controlas el Shadowbox me gustaría saber si me podrías decir y si se puede hacer esto:
Cuando pinhas en una web que se abra el Shadowbox a pantalla completa como si fuera un pop-up. Si es así me podría decir que tendría que poner en el código.
Un saludo y gracias anticipadas
Jorge Lago - Abrir el Shadowbox al entrar en una web
Publicado: 14/04/2010 16:26:36
Para realizar la apertura de una ventana Shadowbox con la carga de una página web, debes realizar la llamada al Shadowbox al final de código, antes del cierre del body.
openShadowbox(content, player, title);
Javier - Abrir el Shadowbox al entrar en una web
Publicado: 14/04/2010 17:39:51
Hola Jorge,
Y gracias por tu rápida respuesta. Perdona por ser pesado pero soy novel y no tengo mucha idea.
Es decir que para abrir como si fuera un pop-up el Shadowbox sólo tengo que meter los archivos en la index y sólo meter ese código que me dijiste:
openShadowbox(content, player, title);
Y como sabría que imagen tiene que abrir?
Perdona por ser tan pesado pero es que todavía no tengo muy claro como funciona. Fui capaz de hacerlo al pinchar una imagen pero no soy capaz de hacerlo al abrir una web que salta inmediamente el shadow.
Un saludo y gracias
Jorge Lago - Abrir el Shadowbox al entrar en una web
Publicado: 14/04/2010 18:34:24
En la función: openShadowbox(content, player, title);
debes indicarle el tipo de ventana Shadowbox que debe abrir con el atributo ′player′ y el archivo que debe buscar con el atributo ′content′.
Quedaría algo como esto: openShadowbox(′archivo.jpg′, ′img′, ′titulo′);
Para llamar la función del Shadowbox, utiliza la etiqueta de html para código javascript.
Espero que te funcione, un Saludo
Pablo - duda
Publicado: 26/04/2010 16:05:27
Hola Javier o Jorge,
Yo tenía una duda parecida a la tuya Javier. Lo que pasa que yo si que no tengo ni puta idea de como funciona este programa.
Lo que quiero es al abrir una web en flash me abra el Shadow pero no se como hacerlo. Yo explico como creo que es y después me decís si está bien o mal:
En la index al princio pongo esto:
Y después al final pongo esto:
openShadowbox(′prueba.jpg′, ′img′, ′titulo′);
Subiría la carpeta del shadow y la imagen de prueba.jpg al servidor por separado y así tendría que funcionar o no?
Si cometo algún error me podríais decir como hacerlo
Un saludo gracias
Pablo - duda
Publicado: 26/04/2010 16:07:12
No me puso lo del principio
Shadowbox.init({
overlayColor: "#eee",
language: "es",
players: ["img"]
});
Jorge Lago - Duda Shadowbox
Publicado: 26/04/2010 17:02:48
Hola Pablo,
lo único que veo que no está correcto en lo que indicas es la ruta de la imagen, ya que si estás subiendo todo lo relativo al Shadowbox a una carpeta tienes que indicar esta ruta, tanto cuando llamas a las funciones javascript como a la imagen que quieres mostrar:
< link rel="stylesheet" type="text/css" href="shadowbox/shadowbox.css" />
< script type="text/javascript" src="shadowbox/shadowbox.js"></script>
< script type="text/javascript" src="shadowbox/shadowbox-funciones.js"></script>
< script type="text/javascript" >
Shadowbox.init();
openShadowbox(′shadowbox/prueba.jpg′, ′img′, ′titulo′);
</script>
Ricardo -
Publicado: 05/05/2010 16:33:48
Hola, no comprendo bien el uso del iframe y del shadowbox, no se si podrían ser algo más específicos, lo intenté pero el shadowbox me sigue abriendo en el iframe con la consecuente pérdida de tamaño. De antemano, gracias.
Jorge Lago - Shadowbox e Iframes
Publicado: 06/05/2010 10:20:35
Hola Ricardo,
si tienes problemas con el tamaño de la ventana del shadowbox, ya que no te coincide con las dimensiones del iframe, puedes indicar las dimensiones del shadowbox cuando le llamas:
Shadowbox.open({
player: ′iframe′,
content: ′www.ideasfrescas.es′
height: 300,
width: 500,
title: ′Mi Ventana′,
options: options
})
Mauricio - Shadownbox en swishmax abrir foto
Publicado: 18/05/2010 21:27:03
Hola me gustaria saber si se puede implementar shadowbox en una pelicula de swishmax o sea una imagen se amplie y haga el efecto de shadownbox
no he podido implementarlo alguna sugerencia o ayuda
mi correo es fodaoxx@gmail.com
Ricardo -
Publicado: 18/05/2010 21:31:05
Hola, voy a ser más específico en mi problema. Tengo un calendario hecho en php. Para no tener que recargar la página cada vez que se traslade de mes en mes lo tengo dentro de un iframe. Es un calendario para un artista el cual en el gestor de contenidos va dejando fechas de presentaciones u otras cosas. Esas quedan marcadas en el calendario. Entonces si en el calendario hay una fecha marcada, al hacer clic ahí se debe abrir en un shadowbox la presentación, noticia o lo que el artista haya puesto.
El problema que tengo es que esto se abre sólo dentro del iframe, yo lo que necesito es que el shadowbox se abra fuera del iframe, seguí lo que aparecía en la faq del shadowbox que decía hacer lo mismo de siempre pero dentro de la página que llama el iframe colocar var Shadowbox = window.parent.Shadowbox; sin embargo no me resulta.
Ricardo -
Publicado: 19/05/2010 09:31:59
Y siendo más específico aún, lo que tengo es:
Un index que tiene:
llamada a estilos y js del shadowbox + un javascript con:
Shadowbox.init({
displayNav:true,
autoplayMovies:true,
displayCounter:false,
continuous:true,
counterLimit:40,
counterType:"skin",
handleOversize:"drag"
});
< iframe src="cal.php" name="iframe" width="230" height="166" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">
Y lo que está en el iframe, es decir, el archivo cal.php es un javascript que tiene:
var Shadowbox = window.parent.Shadowbox;
y la etiqueta a que llama al shadowbox con rel="Shadowbox"
Silvia Herguedas -
Publicado: 19/05/2010 13:11:08
Hola Ricardo, puede que tu problema sea que no hayas hecho el include de las librerías necesarias para el shadow en el archivo padre?
para que funcione esta forma de programar con el shadow, el archivo padre tiene que tener la inicialización y las librerias de archivos necesarias, es decir:
- la linea que carga el css del shadow (shadowbox.css)
- la línea que carga el javascript del shadow (shadowbox.js)
- la línea que carga el javascript de las funciones hechas por nosotros para el shadow (shadowbox-funciones.js)
- y el escript que inicializa el shadowbox: Shadowbox.init();
silvia herguedas - Shadownbox en swishmax
Publicado: 19/05/2010 13:19:15
Hola Mauricio, no se muy bien a qué te refieres, intenta explicarte más.
Por lo que me ha parecido entender, creo que lo que quieres es que el programa SWiSH Max haga el efecto del shadowbox al cargar una imagen?
danos más piestas.
Ricardo -
Publicado: 19/05/2010 20:02:55
Hola Silvia, las librerías están cargadas correctamente, de hecho eso siempre lo compruebo con el dreamweaver cs4 donde si un archivo contiene include, las muestra también, éstas están en el archivo padre, así es que ese no sería el problema.
Silvia Herguedas - Shadowbox no carga en el iframe padre
Publicado: 20/05/2010 11:11:36
Hola Ricardo, prueba a hacer la llamanda al shadow con: top.nombreFuncionShadow(), en vez de parent.nombreFuncionShadow(). Y sin el window, ya que este objeto hace referencia a la ventana actual.
Mauricio - abrir video o imagen en swishmax
Publicado: 23/05/2010 21:56:16
Hola Silvia mi idea es abrir una imagen o video de youtube que sobreexponga como se ve en los ejemplo de arriba en una pagina echa en en swishmax
con efecto como por ejemplo en una foto seria
on (press) {
javascript(getURL("javascript: openShadowbox( ′foto.jpg′, ′img′, ′Title′)");
}
puse como sale arriba peor no hace nada
alguna sugerencia po ejemplo a seguir
Saludos
Silvia Herguedas - Shadownbox en swishmax
Publicado: 24/05/2010 09:37:34
Hola Mauricio, no he usado nunca swishmax, pero si se programa igual que en flash, el codigo que has puesto está mal, sería sin la funcion javascript():
on (press) {
getURL("javascript: openShadowbox( ′foto.jpg′, ′img′, ′Title′)");
}
y esto así deberia de funcinar, siempre y cuando en el archivo donde se ejecuta el swf, esten cargadas las librerías que necesita el shadow.
un saludo
Shadownbox en swishmax - me funciona shadownbox pero no se ve el fondo de la pagina transparente
Publicado: 26/05/2010 00:08:03
hola silvia gracias por la ayuda.. ahora si me funciona .. pero el fondo de la pantalla no se transparente como el efcto en el html.
Saludos
fernando - ayuda
Publicado: 07/07/2010 20:53:25
Hola, estoy intentando meter google maps dentro de un shadowbox, el problema es que hace el efecto me abre el iframe que contiene el google maps pero no en el tamaño deseado del iframe.
si puedes ayudarme te lo agradecería.
Silvia herguedas - Shadowbox con Google Maps
Publicado: 08/07/2010 08:43:25
hola fernando,
no me ha quedado muy clara tu cuestión, pero tenemos un artículo en el que hablamos de cómo usar shadowbox con google maps, echale un vistazo, a ver si te puede ayudar. Y para darle las dimensiones correctas lo unico que tendrías que hacer es editar la función que viene en este artículo, para pasarle como parámetros el ancho y el alto.
Es decir, la llamada de la función quedaría así: function GoogleMaps(latitud,longitud,texto,ancho,alto)
y lo que tienes que remplazar dentro de la función son las dos líneas donde se define el ancho y el alto:
height: alto, //alto de la ventana del Shadowbox
width: ancho, //ancho de la ventana del Shadowbox
Shadowbox con Google Maps
