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
<link href="multibox.css" type="text/css"/> <script src= "mootools.js" ></script> <script src="overlay.js"></script> <script src= "multibox.js" ></script>
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”
<a
href="files/IMG_8966.jpg"
id="mb1"
class="mb"
title="jpg"
><img src="files/tIMG_8966.jpg" alt="" border="0" /></a>
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.
<div class="multiBoxDesc mb1"> Descripción de la Imagen... </div>
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?
<script type="text/javascript">
window.addEvent('domready', function(){
new MultiBox('mb', {descClassName: 'multiBoxDesc'});
});
</script>
Recursos:
Tags
Soy
Noviembre 19th, 2008 at 8:01 am
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?
Noviembre 19th, 2008 at 12:06 pm
Pueden ser varias razones, tendrias el codigo para verlo?, puede ser que una etiqueta este mal cerrada, en fin, Saludos.
Marzo 20th, 2009 at 11:06 am
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 !
Marzo 20th, 2009 at 9:38 pm
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.
Junio 12th, 2009 at 1:59 pm
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
Agosto 31st, 2009 at 11:32 am
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!!!.