Contenido

Shadowbox, ¿el lightbox definitivo?

26 Ene

+ 29

Shadowbox, es una versión de Lightbox creada para poder ser usada para cualquier finalidad posible. Con Shadowbox, podremos abrir desde una imagen, hasta una página web, pasando por un set de imagenes o videos de diferentes formatos, todo ello siendo cross-browser, osea funcionando en la mayoría de navegadores web.  ¿Podría ser el lightbox definitivo?

shadowbox.jpg

Además de ser un lightbox multiuso, dispone de una serie de adaptadores, unos scripts que se encargan de hacer que ShadowBox sea compatible con la mayoría de frameworks javascript del momento. De esta forma no necesitamos una versión de lightbox concreta para nuestra aplicación.

  • Yahoo! User Interface Library
  • Ext
  • Prototype + Script.aculo.us
  • jQuery
  • MooTools (requiere Fx.Styles)

Esto hace que la forma de emplearlo, requiera que carguemos los ficheros JS, de una forma determinada. Dependiendo del framework deberemos cargar los ficheros necesarios:

<head>
	<script type="text/javascript" src="shadowbox-yui.js"></script> // Adaptador para YUI!
	<script type="text/javascript" src="shadowbox-prototype.js"></script> //Adaptador para Prototype + Script.aculo.us
	<script type="text/javascript" src="src/js/adapter/shadowbox-ext.js"></script> //Adaptador para Ext.
</head>

[Demo] [API] [Descargar]  

  • Interesante, he probado varias pero esta bastante completa, voy a pegarle una implementación a ver que sale, esperemos no ocupe tantos recursos como Lightbox,

    Slds y gracias por el dato

  • Pues posiblemente sea el mejor de todos «los lightbox», en mi opinión. No lo conocía pero desde luego funciona genial.

  • Qué buena pinta… Habrá que comprobar cuán cross-browser es y si, si supera las pruebas me lo quedo como Lightbox definitivo

  • Me parece muy bueno. Me surge una duda ahora. ¿Para qué usais realmente los lightbox?

    Yo los usé en su día para los sistemas de registro / login de usuarios pero poco más (podéis verlo en mi página), pero la verdad es que siempre me han gustado estos «lightbox» y me gustaría usarlos más a menudo (teniendo algo de «idea» sobre para que usarlos, claro)

  • A primera vista parece muy atractivo: Adaptable a cualquier framework, muestra de todo, facil de personalizar mediante css…
    El unico problema que le encuentro es que es algo pesado (28kb comprimido).
    Supongo que nada es perfecto…

  • Pues a mi la verdad es que no me gusta mucho.

    Cuando abres una ventan mueve los elementos de la página de una forma un tanto extraña.

    Es decir, al hacer click para ver una foto, mientras aparece el recuadro flotante, las fotos de debajo se desplazan unos milimetros y aparece un efecto un poco extraño alrededor del recuadro al redimensionarse.

    Un saludo

  • Muy bueno y sencillo de usar. Le veo una pega. Si intentas abrir una url dentro del lightbox obtiene el content type a partir de la url. he mirado un poco las fuentes y veo que tiene un array de extenxiones válidas y si no es ninguna de esas casca. A mi esta tontería me ha supuesto un problema. Con lo emocionado que estaba yo al ver lo facil de usar que era. Quizas es cuestion de investigar mas

  • Bueno, vengo a comentar que el shadowbox funciona impecable, creo es el más sólido que he probado, creo tiene algunos bugs arreglado de su antecesor lightwindow porque ese cargaba los elementos como video y lo arrastraba al abrirse.. esto en el shadowbox no sucede.. encima sus funciones son completisimas.. lo elegí como definitivo..
    Lo estuve trabajando entre ayer y hoy y pueden ver los resultados allí http://www.crescomas.org.ar/album/ haciendo target a varios objetos como una galeria en html y dentro se ejecuta de vuelta cargando las fotos de la misma.. es decir 2 ventanas «lightbox» dentro en si mismas..
    Sin dudas, es definitivo en su intención.
    Lo recomendo.

    Saludos!
    Jero

  • Y para los usuarios de WordPress cómo debemos instalar este juguete que se ve interesantísimo?

  • He tenido problemas para hacerlo funcionar con mootools, sólo jala en firefox. Cuando abres la página en IE 6 o 7 se va a la liga directamente y carga la imagen de forma «normal»

    Window.onDomReady(function() {
    var options = {
    resizeLgImages: true,
    displayNav: false,
    handleUnsupported: 'remove',
    keysClose: ['c', 27] // c or esc
    };

    Shadowbox.init(options);

    });

    </script

    me falta algo? lo raro es que funciona bien par firefox…

  • Buenas! Habeis probado a usar en internet explorer dentro de un iframe? Yo creo q lo tengo todo correcto pero no me rula. Lo uso con prototype + scriptaculous. La web donde lo tengo es http://www.absentametal.es/lives/lives.php?lang=sp

    En firefox funciona, pero en explorer la imagen se va abajo… en fin. 🙂

    Un saludo y excelente trabajo anieto!!!

  • Hola leo asiduamente el blog ya que tiene un contenido de gran calidad, concretamente acabo de utilizar shadowbox y me funciona muy bien. Pero una pregunta ¿se puede cambiar la palabra «Close» que sirve para cerrar la ventana por otra? y como.
    gracias

  • @pedro leorri: revisa el método «skin», sobre la línea 390 del script.

    Saludos

  • muy bueno.
    sin embargo os comentaré un detalle.
    lo implementé en un sistema de galería de videos en formato flash video(flv). todo muy bonito y rápido.
    luego descubrí un pequeño detalle: el sonido NO FUNCIONA(!!!), tócate los huevos.
    ¿sabéis por qué?
    ¿se puede arreglar?

    gracias y un saludo.

  • Genial tu web y geniales los consejos e ideas que apuntas.
    Gracias a ti he descubierto esta pequeña maravilla del shadowbox y estoy probándolo que da gusto.
    Necesito una ayudita y es urgente. Abro un pequeño formulario de acceso de usuario con este sistema. Si el usuario no está registrado, desde ese mismo formulario puede acceder a otro form más grande donde registrase. El tema es el siguiente: quiero que este segundo formulario de registro siga apareciendo en el shadowbox. Cómo puedo conseguir que se adapte al tamaño del nuevo formulario en lugar de avrirse un nuevo box en la página del formulario de acceso? Me gustaría que funcionara como lo hace la galería de fotos. Estoy mirando el código, jugando con opener y parent pero no lo consigo, el código del shadow me viene grande.
    ¿Alguna sugerencia?
    Gracias!!!

  • estimado, lo encuentro muy bueno y util, pero una pregunta: puedo usarlo desde una pelicula flash?
    seria ideal!

    abrazos y gracias por todo

  • No tengo mucho tiempo probandolo, pero hasta donde he alcanzado a ver, es muy bueno, va muy por encima de las demas versiones de Lightbox que conozco.

  • Buenas, estoy probando con shadowbox, pero no se como usarlo con , lo necesito para imagenes y para un video en flash, ¿como podria hacerlo? ^^»

  • Me ha gustado shadowbox, cumple lo prometido, pero tengo una duda, alguien sabe como llamar la funcion digitando el nombre de la imagen en un input??

    Normalmente se llama la funcion con un vinculo , pero va a una imagen determinada (1590).

    La idea es que haya un input donde digite el nombre de la imagen: Eje: 1590, 1680, 1350.

  • estoy implementando shadowbox, y tengo un problema, en mi pagina tengo un menu con flash, y cuando habre el shadowbox
    este menu desaparece, me podrian ayudar como hago ??? para que esto no pase..
    gracias muy buena tu pag

  • Es bueno, pero la gran desventaja es que no es compatible con el Internet Explorer 8.0, y para allá van todas las PC’s así que ya es necesario que se la hagan cambios a esa versión del Shadowbox.

  • Hola, ante todo enhorabuena por la página muy buenos los post y muy útiles. Me gustaría que alguien me ayude con un problema de instalación, me gustaría crear el efecto para un mapa de Google Maps, pero no lo consigo, ¿me podría alguien decir exactamente cual es el código que hay que colocar en el head?, por lo demás, utilizo un vínculo normal y corriente y dentro del <a href……. coloco un title=»Google» y un rel=»gb_page_fs[]»
    Espero me podais ayudar, pues ya llevo dándole vueltas tres días y no soy capaz de hacerlo funcionar, me pasa lo que a malag, se abre en una ventana normal y corriente.
    Gracias de antemano por vuestra ayuda.
    Un saludo a todos.

  • @Ignacio: te parece ?? ….
    Shadowbox vs Lightbox
    Shadowbox
    1 -diseño discreto ( lo podes aplicar a cualquier web que no desentona… al contrario de las puntas redondeadas y los botones que tiene el shadowbox)

    2 – es todo en uno, reproduce video, fotos, podes ponerle iframes ( meter una web dentro totalmente funcional ya sea externa a tu web o para poner un formulario)

    3 – liviano y compatible con todos los browsers

    lo deja muy chiquito al lightbox

  • Estoy haciendo la web con Iweb y el shadowbox sólo funciona con ie 8, no anteriores, os pasa eso? a qué se debe o qué tengo que modificar? Gracias por las respuestas

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.