Review 2: Shadowbox

17/abr/2008 8

Ventanas modales actualmente hay por montones, cada una ofrece mejores prestaciones y se comportan relativamente bien dentro del entorno de desarrollo al cual fueron creadas. Lightbox fue uno de los primeros, Thickbox uno de los más completos, Greybox, Lightwindow… enfin. Hace poco descubrí el que creo es el que va más allá de todos, y que merece una especial atención: Shadowbox.

Shadowbox es una ventana modal escrita enteramente en Javascript. Puede desplegar una amplia gama de archivos gráficos (imágenes, películas, etc.). Es crossbrowser, multiplataforma, de código limpio, relativamente bien documentado (aunque es nuevo).

Más prestaciones:

  • Su marcado se apega a los estándares web (valida).
  • Puede adaptarse fácilmente a cualquier aplicación.
  • Fácilmente customizable mediantye skins (CSS).
  • Soporta formatos de imágenes, Quicktime, Windows Media Player, Flash, Flash Video, HTML y páginas externas.
  • Maneja errores de plugin elegantemente, desplegando una sugerencia de link para bajarlo si hay necesidad.
  • Ofrece opciones configurables sin tocar código fuente.
  • Soporta enlaces vía mapeo de imágenes (mediante la etiqueta <area>).
  • Compatible con Firefox 1.5+, Camino, Safari 2+, Opera 9+, Internet Explorer 6+.

Impresionante, ¿no? Pero lo que más me llamó la atención fue otro detalle:

  • Mediante adaptadores, puedes usarla sin importar el framework que hayas implementado en tu sitio, o que estés acostumbrado a trabajar. O sea, puedes usar Shadowbox con Prototype, jQuery, Yahoo! UI, Mootools, Ext o Dojo; el que más te acomode. ¡Genial! Sólo debes incluir el adapter necesario de acuerdo al framework a gusto del consumidor.

Lo implementé en un nuevo proyecto personal llamado Rulz, y realmente muy potente. Lo mejor es que actúa mediante la asignación del atributo rel="shadowbox" dentro de <a>, lo que a contrario de Thickbox (que fue el que estaba usando), no me interfiere en el enlace ya que estaba ya pasando algunos parámetros de geo-ubicación (para Google Maps, pueden probarlo si entran a alguna reseña y presionan "Ver mapa de ubicación").

Pros:

  • fácil implementación.
  • ultra-mega-customizable.
  • multi-framework (!!!).

Contras:

  • no es tan liviano como quisiera.

Link

Shadowbox 1.0

Comentarios

  1. Juan Pablo [#]

    Pues hay que probarlo. He usado thickbox por bastante tiempo pero este parece bien robusto y flexible…

  2. Luis Morrison [#]

    ¿y que hay del HighSlide? – http://vikjavev.no/highslide
    yo lo he usado siempre y no sólo porque sea muy customizable, unobtrusive (si le pones la opción, claro) mediante rel=”highslide”, sino porque no es dependiente de algun framework, trabaja con el suyo propio!! asi que no te andas complicando la existencia si estas casado con un FrWk en especial y para mi, no es tan pesado si lo comprimes. Ofrece lo mismo que este que mencionas y ya lleva algo de tiempo por ahi y esta ya maduro.. echenle una ojeada. Por cierto, felicidades excelente blog!

  3. Mañungo [#]

    No entiendo… durante años odiamos los pop-up y los combatimos hasta el cansacio y actualmente hasta el browser mas rasca implementa un bloqueador de ellos… como es posible que se pongan de moda nuevamente ?!

  4. jairosanz [#]

    Fantástico, yo usaba moodalbox para html y lightbox para imagenes pero teniendo todo en uno… no podemos pedir mas! 😀

    muchas gracias por el post!

  5. La Maga [#]

    Hace poquito descubrí este sitio y la verdad es que es buenísimo ! Me ayudó mucho a solucionar problemas de maquetación con CSS (me costó mucho desprenderme de las tablas).
    Yo usaba el Lightbox pero ahora voy a implementar este !
    Saludos !

  6. fearlex [#]

    Buenisimoooo 😀

  7. pablo [#]

    estoy trabajando con shadowbox, pero tengo un problema, tengo un menu en mi pag en flash, y cuando habre el box este menu desaparece ALGUIEN PUEDE AYUDARME???
    GRACIAS

  8. JSequeiros [#]

    Como pasar variables de formulario con php …

Deja tu Comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

CSSLab