RSS

Multibox con Mootools

Thu, Oct 9, 2008

Ajax, CSS, Desarrollo, Javascript, Mootools

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:

Posts Relacionados

,

This post was written by:

admin - who has written 52 posts on Craftyman Blog.


Contact the author

2 Comments For This Post

  1. cesar Says:

    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 Says:

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

Leave a Reply