Multibox con Mootools

div align=”center”>

Multibox es una librería que nos sirve para poder crear nuestra galería ya no solo de fotos, el multibox soporta distintos tipos de formato multimedia, como: flash (flv), video(mov,wmv), mp3, html.

En este tutorial les explico como utilizar esta util herramienta para hacer una galería

Primero:
Incluir los javascript y hojas de estilo


 


Segundo:
Dentro del body añadiremos enlaces donde colocaremos en href la ruta de nuestro archivo, el id dendra que ser correlativo si ponemos mas enlaces, todos los enlaces que serán vistos en la galería tendrán que tener el class=”mb”


Tercero:
Luego de poner el enlace podremos poner una descripción para el archivo, tendrá que llevar el class=”multiBoxDesc mb1″, el mb1 refiere al id del enlace.

Descripción de la Imagen...

Eso es todo si tenemos varios archivos lo único que cambiara sera el id en el enlace y el div para la descripción
Preguntas, sugerencias, comentarios?


Recursos:

zp8497586rq

También te puede interesar

10 Comments

  1. cesar
    nov 19, 2008 @ 08:01:05

    Buenas..muchas gracias por enseñar como funciona..lo implemente y me funciono..el unico inconveniente que tengo (solo me sucede con firefox, no con IE..rarisimo!!!)es que me aparece una barra horizontal en mi sitio,si deshabilito el javascript..desaparece la barra horizontal, si lo vuelvo a habilitar, aparece otra vez,alguna idea por que ocurre?

  2. admin
    nov 19, 2008 @ 12:06:00

    Pueden ser varias razones, tendrias el codigo para verlo?, puede ser que una etiqueta este mal cerrada, en fin, Saludos.

  3. Manuel
    mar 20, 2009 @ 11:06:25

    Hola !, muchas gracias por esta impresionante utilidad, lejos lo mejor !
    Pero tengo una duda, como puedo separar los contenidos que voy a mostrar ?
    me explico:
    Quisiera mostrar por un lado puras ilustraciones, por otro lado puros videos y por otro lado puros mp3, el problema es que no me resulta eso y muestra todos juntos, como que estuvieran en una misma clasificacion.
    como puedo remediar esto?
    de antemano gracias por tu respuesta !

    • admin
      mar 20, 2009 @ 21:38:34

      Hola manuel , lo que tienes que hacer para que no se convinen es poner para cada categoria diferentes clases, me explico:

      Para flv:
      <a href="files/curly.flv" id="flv1" class="flv" title="Movie" rel="nofollow">flv</a>
      <div class="flvs flv1">Ejemplo de flv</div>
      <a href="files/curly.flv" id="flv2" class="flv" title="Movie" rel="nofollow">flv</a>
      <div class="flvs flv2">Ejemplo de flv2</div>
      <a href="files/curly.flv" id="flv3" class="flv" title="Movie" rel="nofollow">flv</a>
      <div class="flvs flv3">Ejemplo de flv3</div>

      Para imagen

      <a href="files/img.jpg" id="im1" class="im" title="jpg" rel="nofollow"><img src="files/img.jpg" /></a>
      <div class="ims im1">Descripcion de la Imagen.</div>
      <a href="files/img.jpg" id="im2" class="im" title="jpg" rel="nofollow"><img src="files/img.jpg" /></a>
      <div class="ims im2">Descripcion de la Imagen.</div>

      Si te fijas los dos conjuntos son de distinta clase “flvs, ims”

      Ahora cuando llames al script tendras que hacer esto

      window.addEvent(‘domready’, function(){
      new MultiBox(‘flv’, {descClassName: ‘flvs’, useOverlay: true});
      new MultiBox(‘im’, {descClassName: ‘ims’, useOverlay: true});
      });

      Des esta manera actuaran como dos MultiBox por separado.
      Saludos.

  4. Takashi
    jun 12, 2009 @ 13:59:33

    Muchas gracias, de verdad que el codigo esta excelente.
    Lamentablemente tengo un problema, anteriormente tenia agregada mi libreria de jquery desacrgada desde la pagina oficial y tenia un simple funcion
    function mostrarDetalles(idDetalle){
    if ($("div#"+idDetalle).is(":hidden")){
    $("div#" + idDetalle).slideDown("slow");
    }else{
    $("div#" + idDetalle).slideUp("slow");
    }
    }

    y ahora ese efcto que cosistia en contraer o desplegar ciertos div.

    Si comento el multibox sigue funcionando normalmente asi que asumo que debe ser el multibox.

    El error que me da es el siguiente: $(“div#” + idDetalle)is null

    Si pueden ayudarme se los agradeceria mucho

  5. italo
    ago 31, 2009 @ 11:32:16

    Saludos!!

    De todos los lightbox que he probado, me gusta este por la animacion que parte desde el link hacia el centro de la pantalla al abrirlo. No he visto eso en ningun otro. Alguien sabe como abrir un multibox desde javascript y no desde un link? Y aparte de eso, como utilizar las funciones onOpen y onClose? Es que si se habran dado cuenta, al abrir un html con sonido dentro de un multibox, al cerrarlo sigue sonando la musica de fondo!!!.

  6. Lia
    jun 09, 2010 @ 09:02:08

    Buenas, venimos usando perfectamente el Multibox pero se me ocurrió .) hacer un botón en flash para que lo levante y no sé qué código debería poner para que funciones.
    Agradezco si me pueden asesorar !

  7. frao17
    nov 03, 2010 @ 10:45:13

    Hola a todos, necesito abrir el MultiBox que me baje de esta pagina phatfusion.net/multibox quiero abrirlo desde una aplicación flash. He estado buscando por internet y solo encuentro la solución para Lightbox:

    que codigos debo meter en la programacion del boton de flash para llamar al multibox

  8. jere
    nov 13, 2010 @ 18:01:45

    buenas, te hago una consulta: la verdad que no puedo hacerlo funcionar, veo el thumb, lo clickeo y se agranda la imagen…pero no puedo hacer funcionar el script. soy medio nuevo en esto, te dejo el codigo, capas ves el error. saludos, gracias!(estoy trabajando con dw)

    fotos

    window.addEvent(‘domready’, function(){
    new MultiBox(‘mb’, {descClassName: ‘mbs’, useOverlay: true});
    });

  9. miguelito
    nov 03, 2011 @ 15:36:56

    Estimado
    Estoy trabajando con este script levantando una ventana iframe con contenido y funciona perfecto desde un link. El problema es como hacer esto mismo cargándolo desde el OnLoad? O sea ejecutar:

    Link a ventana

    solo al cargar la pagina?

    Muchas gracias!