Usando MOOdalBox – un Lightbox para HTML

enero 18, 2008

Hace poco en uno de los proyectos que adelanto, necesitaba mostrar la información de una noticia o evento cuando le daban a un link, pero no quería hacerlo en una página nueva, ya que esto implicaba cargar nuevamente todo el diseño de la página solo para mostrar un par de líneas de texto.

Buscando en la Web encontré MOOdalBox, una librería que utiliza el framework de mootools como base para funcionar pero que permite cargar cualquier contenido HTML dentro de una ventana animada que se sobrepone sobre la página, al mismo estilo de Lightbox pero con HTML.

Esta herramienta es ideal para mostrar porciones de contenido que no justifican una redirección del navegador y que se vuelva a cargar todo el contenido gráfico.

Con MOOdalBox, tenemos la posibilidad de definir el tamaño de la ventana que se requiere mostrar, y es tan sencillo de aplicar que de seguro no dudaremos en usarlo en nuestros proyectos.

Primero debemos descargar lo necesario del sitio de MOOdalBox.

En el archivo comprimido vienen tres carpetas:

  • Css
    • Moodalbox.css
  • Img
    • Closelabel.gif
    • Loading.gif
  • Js
    • Mootools.js
    • Moodalbox.js

En la cabecera del documento HTML (<HEAD>) deben incluirse las dos librerías y la hoja de estilo.

<script type=”text/javascript” src=”/js/mootools.js”></script>

<script type=”text/javascript” src=”/js/moodalbox.js”></script>

<link rel=”stylesheet” href=”/css/moodalbox.css” type=”text/css” media=”screen” />

Y luego solo es necesario incluir rel=”moodalbox” dentro de la etiqueta de hipervínculo en la que necesitamos aplicar este efecto.

<a href=”paginaDestino.html” rel=”moodalbox” title=”Texto de descripción de la pagina”>Texto del Link</a>.

Y eso es todo. Ya esta aplicado el efecto y nuestro sitio ya parece más dinámico y Web 2.0.

Links:

MOOdalBox site

Anuncios

21 Responses to “Usando MOOdalBox – un Lightbox para HTML”

  1. Andres Says:

    Yo uso Moodalbox, pero tiene un problema con Safari…

  2. Matías Phillips Says:

    No em funciona….no sé qué hacer…

  3. D Says:

    Hola, cual es el error que muestra? quizas pueda ser porque tienes una version muy reciente de mootools. comentame el error y te ayudo a ver que pasa.

  4. franklinext Says:

    el cuadro aparece siempre en el lado superior de la pagina.. cuando el elemento al que le hice click esta casi al final de la pagina no puedes ver el efecto sino hasta que te desplazas a la parte superior… aguna manera de mejorar eso?

  5. Roberto Says:

    Conoces alguna forma de que al pinchar sobre el fondo obscurecido por el moodalbox no se cierre (dejar bloqueado el popup hasta que se ejecute un evento)…?

  6. ro Says:

    como vinculo moodalbox desde flash?? he tratado de hacerlo pero no lo consigo, ayuda por favor.

  7. greser Says:

    Estoy en las mismas que ro.

    Quiero abrir moodalbox desde flash, pero no lo consigo. Si alguien sabe como realizarlo, por favor que nos ayude.

    Gracias.

  8. moro Says:

    pues yo tengo otro problema…

    siempre me aparece el “oops.. there was a problem with your request”,

    no carga mi html….

  9. manuel Says:

    pues baje todo y no me funciona al darle click al texto me aparece la imagen de loading pero me manda a la pagina k kiero cargar me la manda un un _blank osea en una nueva ventana

  10. Creativart Says:

    En cuanto al problema de manuel, como sugerencia comprobaría que no esté ejecutándose en local… a veces lo sencillo lo hacemos complicado. Suerte

  11. gema Says:

    Hola, parece que el link ya no funciona. Se podría encontrar de otra manera

    Mil gracias!!


  12. Hola, descargué la versión que entrega Gema (la del post no está activa). ¿Estás segura que es el mismo? no consigo hacerlo funcionar…

    Saludos,

    Sebastián

  13. Pedroil Says:

    Estimado, ando buscando una forma de llamar un pagina.html en ligthbox desde un boton de flash, si me pudieras ayudar en éste te lo agradeceré un montón. a aparecido en otras preguntas pero veo la solución.

    Saludos

  14. darkbeni Says:

    tengo un pequeño problema, estoy usando el moodalbox para que al pinchar en un boton me aparezca un pequeño formulario html.
    hacerlo lo hace correctamente, pero al iniciar la funcion y abrirme la nueva pantalla, la pantalla que se queda por debajo se descoloca completamente es como si el javascript me modificara el css principal. alguien puede ayudarme.
    gracias


  15. […] Fuente : https://codeline.wordpress.com/2008/01/18/usando-moodalbox-%E2%80%93-un-lightbox-para-html/ […]


  16. […] Activision Announces 007 Legends | Movie News | Empire http://t.co/SQFeefxI [evcorreu] Shared Usando MOOdalBox – un Lightbox para HTML « Codeline. Siguiente parada: Tuxtla Gutierrez, Chiapas!! Nos leemos en unos días! [evcorreu] Si te gusta […]


  17. Estoy creando un manual para poder utilizar un ligh box, ya sea en modo html o solo fotos, cuando lo tenga les aviso..

    Saludos


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: