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.

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. (ver el post original en nuestro blog para ver nuestro theme)

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;
}

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 aqui o en nuestro blog.

Personalizar Mediabox y su uso en WordPress

Compártelo

También te puede interesar...

Comentarios

Escribe un comentario

Artículos más vistos del usuario

Últimos artículos del usuario