moodalbox &laquo; WordPress.com Tag Feed http://wordpress.com/tag/moodalbox/ Feed of posts on WordPress.com tagged "moodalbox" Thu, 21 Aug 2008 07:14:43 +0000 http://wordpress.com/tags/ en <![CDATA[Moodalbox]]> http://operaomnia.wordpress.com/?p=569 Wed, 07 May 2008 13:01:30 +0000 Cisco http://operaomnia.wordpress.com/?p=569 Lighbox e affini sono ormai in pieno boom e ne "fioriscono" di continuo.

Spesso però chi li usa dimentica di controllare il framework su cui si basa il tutto, facendo così entrare in conflitto librerie javascript, con lo splendido risultato di non non riuscir a far funzionare niente.

La prima cosa da controllare è quindi  proprio il framework base, mootools, jQuery,...

Per questo oggi segnalo moodalbox, applicabile anche su pagine html (un esempio nel mio sito: betadesignstudio). Per la mia gioia si basa su mootools, la mia libreria preferita ;) 

L'implementazione non si discosta dal normale lightbox, basta includere i file .js e ricordarsi l'atributo rel="moodalbox".

Buon divertimento!

 

Cisco

]]> <![CDATA[Usando MOOdalBox – un Lightbox para HTML]]> http://codeline.wordpress.com/2008/01/18/usando-moodalbox-%e2%80%93-un-lightbox-para-html/ Fri, 18 Jan 2008 19:29:10 +0000 D 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

]]>