Blog de sonicbyte

Personalizar Mediabox y su uso en WordPress

En nuestros proyectos y también en nuestra web y blog, utilizamos el framework de javascript Mootools. Dentro de todas las opciones para crear modal dialogs al estilo Lightbox escogimos mediaboxadvanced de John Einselen (aka iaian7).
Su uso es muy sencillo y está bastante bien explicado en su web. Permite mostrar fotografías, contenido y videos de forma muy elegante y práctica. Las fotografías y videos pueden estar enlazados formando distintos sets de galerías y los videos pueden ser flash videos (flv) propios o estar colgados en páginas de servicios sociales de videos, como por ejemplo Youtube, Facebook, Flickr Video entre otros.

Ejemplo de una galería de fotografías, algunos proyectos de Sonicbyte:

Como puede apreciarse, los estilos del Mediabox original han sido modificados por nosotros creando un theme propio, también el código del javascript original ha tenido que ser retocado para lograr el theme. (comparar con los ejemplos en el sitio web del autor)

Hemos cambiado los colores, los botones para cerrar la ventana y navegar por las galerías, y el gif de la precarga. Una ventaja del estilo que utilizamos es que permite la inserción del logo de la empresa o web. Esto se logra creando un div en el cuerpo principal del modal (../js/mediabox/mediaboxAdv-1.0.5.js):

.
.
window.addEvent("domready", function() {
 // Create and append the Mediabox HTML code at the bottom of the document
 $(document.body).adopt(
 $$([
 overlay = new Element("div", {id: "mbOverlay"}).addEvent("click", close),
 center = new Element("div", {id: "mbCenter"})
 ]).setStyle("display", "none")
 );

 new Element("div", {id: "roroland"}).injectInside(center);
 image = new Element("div", {id: "mbImage"}).injectInside(center);
.
.

Luego en el css colocamos las siguientes reglas de estilo al div creado (../js/mediabox/css/mediaboxAdvSonic.css):

/* custom div containing logo */
#roroland{
 position: absolute;
 z-index: 9999;
 width: 100px;
 height: 100px;
 top: -30px;
 left: -40px;
 background-image: url(../images/logo.png);
 background-repeat: no-repeat;
}

Como comentaba el mediabox puede mostrar videos, en este caso es un video flv propio alojado en nuestro servidor:

Por último quería comentar sobre la utilización de este plugin de Mootools en WordPress. Para decidir si en un post se cargan los archivos del Mediabox (js y css) utilizamos un custom field como condicional al cual llamamos ‘has_mediabox’ y le damos el valor TRUE en caso de ser necesaria ésta carga. Esto garantizará que no se carguen archivos innecesarios en aquellos posts que no requieran el plugin. Los archivos del plugin pueden subirse a una carpeta llamada ‘mediabox’ dentro de la carpeta ‘js’ del theme, por lo que el template del header tendrá el siguiente fragmento de código:

<?php
if (is_single()) {
  if ($mediabox = get_post_meta($post->ID, 'has_mediabox', true)) {
    if ($mediabox == 'TRUE')
    { ?>
      <script type='text/javascript' src='<?php bloginfo('template_url'); ?>/js/mediabox/mediaboxAdv-1.0.5.js'></script>
      <link href='<?php bloginfo('template_url'); ?>/js/mediabox/css/mediaboxAdvSonic.css' rel='stylesheet' type='text/css' />
    <?php }
  }
}
?>

Bueno, esto es todo, espero que les sea de utilidad. Si se encuentran con problemas a la hora de utilizar Mediabox y no les alcanza la explicación de la página del autor pueden recudir a la página de discusión de los grupos Google (http://groups.google.com/group/mediaboxsupport?hl=en) o dejar un comentario.

Actualización (18/01/10):

Debido a la pregunta de Paolo me he dado cuenta que faltaba explicar que hay que comentar una línea del css del mediabox para que no corte el logo,  (../js/mediabox/css/mediaboxAdvSonic.css):

#mbCenter {
	position: absolute;
	z-index: 9999;
	left: 50%;
	/* overflow: hidden; */
	background-color: #006699;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
	-webkit-box-shadow: 0px 10px 40px rgba(0,0,0,0.70);
}