Usando MOOdalBox – un Lightbox (visor de fotos) para cargar HTML en vez de jpg by codeline

Fuente : http://codeline.wordpress.com/2008/01/18/usando-moodalbox-%E2%80%93-un-lightbox-para-html/

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

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