2

Multibox: Flash en un popup para Mootools

Con esta utilidad escrita para Mootools 1.11, podremos ver un vídeo en Flash en un popup tipo lightbox. Primero incluimos las liberías necesarias en el header:

<link href="multibox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="overlay.js"></script>
<script type="text/javascript" src="multibox.js"></script>

A continuación, dentro del body escribimos el enlace que generará el popup:

<a href="pelicula.flv" rel="width:400,height:300" id="mb1" class="multibox" title="Pelicula">ejemplo FLV</a>
<div class="multiBoxDesc mb1">ejemplo FLV</div>

El enlace apunta al fichero FLV y en el parámetro rel ponemos la anchura y altura del flash. Luego añadimos un div que contendrá el lightbox.

Si queremos hacer una galería, repetiremos el paso anterior, cambiando el id para cada enlace y contenedor (por ejemplo mb1, mb2, mb3…).

Y por último escribimos el javascript:

<script type="text/javascript">
  window.addEvent('domready', function(){
    box = new MultiBox('multibox', {descClassName: 'multiBoxDesc', useOverlay:true});
  });
</script>

El primer parámetro de la función Multibox es la clase que le hemos puesto al enlace, y el segundo es un array de opciones, en el que como mínimo debe ir el nombre de la clase del div contenedor.

Multibox detecta automáticamente el formato del archivo que queremos abrir. Soporta casi cualquier tipo de archivo: imágenes, FLV, SWF, MOV, MP3… Incluso PHP.

Descargar: Multibox para Mootools.

2 comentarios

  1. hey gracias por el popup pero me podria pasar el mootols.js el overlay.js
    y el multibox.js ya que en la pagina de Phatfusion. no esta el overlay gracias me los podria enviar a esta direccion

    http://www.emailmeform.com/builder/form/21yHW3bbc1hdQ

    • En la versión actual de Multibox (1.4.1) no es necesario el archivo overlay.js.

      Si estás usando una versión antigua como la de esta entrada (1.11), puedes bajarte el archivo overlay.js de aquí:

      http://www.dilella.org/foo/overlay.js

      Mi recomendación es que uses la última versión de los scripts. Esta entrada fue escrita hace 2 años y se ha quedado obsoleta.

Comentar

*

*

Para añadir código formateado, escribe el código entre <pre lang="php" line="1"> y </pre>

Si quieres un avatar personalizado, créate uno en gravatar.com con tu dirección de correo. Cada vez que comentes con ese correo, aparecerá tu avatar personalizado.