MediaBox « Código al Descubierto

Fuentes web: Entradas; Comentarios

MediaBox

I. Introducción

Esta peculiar librería es capaz de ofrecer videos como si fueran ventanas emergentes. Ofrece también la posibilidad de mostrar flash. El principal problema es a la hora de mostrar simples imágenes donde el programa te genera las barras de desplazamiento vertical y horizontal. La única forma de deshacernos de ellas es haciendo más grande el visor a costa de un mayor tamaño innecesario.

Según comenta en la web, se recomienda “acoplar” otra librería (en concreto, slimbox) para la visualización de imágenes. Es decir, usar dos librerías a la vez si lo que queremos es mostrar ambas cosas. No sería una mala opción aunque claro, ya no hablamos de una única librería la que ofrezca todas nuestras prestaciones.

Existen principalmente tres ficheros javascript que son necesarios incluir y una hoja de estilos. A su vez, será necesario disponer de una carpeta donde almacenar las imágenes que usa el visor.

II. Uso de la librería

Lo primero que hay que hacer es realizar las referencias adecuadas en la cabecera de la página web:

<link rel=”stylesheet” href=”css/mediabox.css” mce_href=”css/mediabox.css” type=”text/css” media=”screen” />
<script src=”js/mootools.js” mce_src=”js/mootools.js” type=”text/javascript”></script>
<script src=”js/swfobject.js” mce_src=”js/swfobject.js” type=”text/javascript”></script>
<script src=”js/mediabox.js” mce_src=”js/mediabox.js” type=”text/javascript”></script>

Se puede observar que se añade tanto el fichero javascript como el fichero CSS. A continuación mostramos algunas referencias posibles:

<a href=”DIRECCION_URL” mce_href=”DIRECCION_URL” rel=”mediabox[480 270]” title=”Video QuickTime”>Video QuickTime »</a>
<a href=”DIRECCION_URL” mce_href=”DIRECCION_URL” rel=”mediabox[480 380]” title=”Video de YouTube.com”>Video YouTube »</a>
<a href=”DIRECCION_URL” mce_href=”DIRECCION_URL” rel=”mediabox[640 360]” title=”FLASH Video”>FLASH Video »</a>
<a href=”DIRECCION_URL” mce_href=”DIRECCION_URL” rel=”mediabox[640 360]“>Google »</a>

La única diferencia es que, ahora, en el campo rel hemos añadido el parámetro mediabox[ANCHO ALTO] con lo que podemos definir como queremos que sea el visor a mostrar. En el campo href es donde elegimos que queremos mostrar. No importa que sean videos, enlaces del YouTube, páginas web o ficheros SWF.

La única restricción la muestra a la hora de intentar representar imágenes. Limitación por la cual nos hace pensar del uso de esta librería combinada con otra que permita visualizar adecuadamente las mismas.