Laboratorio de Fermin

Describamos un poco el problema y como solucionarlo para que cada uno lo use como mejor le venga en gana ^_^

Tenemos una pedazo libreria Lightbox2 con la cual podemos realizar pequeños catalogos de imagenes muy muy resultones, con efectos de carga, y navegabilidad muy buena.

Resulta que tenemos toda una carpeta de imagenes de wallpapers (por ejemplo) y queremos mostrarlas con esta libreria. Segun la web de la libreria es tan sencillo como esto:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Bien, sencillo y practico.

Problema: Resulta que tengo unas 50, 100, 200 imagenes en el directorio, y picar esto en html es de monos, y no tengo cara de mono. Asi que le damos un poco al coco.

Despues de pegarme cabezados con varias cosas que no funcionaban, me di cuenta que para funcionar habria que modificar el DOM y PREMIO.

¿Como se hace eso?
Iba a explicar que es el DOM, pero para eso esta la wikipedia, que es mas lista que yo.

Yo use scriptaculous, otra libreria muy usada y bastante recomendable para hacer cosas 2.0 o mas, Builder es una funcion que modifica el DOM que nos viene a pedir de boca.

 

Como usamos esto para crear nuestra galeria.
Una funcioncita que vaya obteniendo los nombres de los ficheros, con un array, desde un XML, navegando por el directorio, … eso es a gusto del consumidor y lo importante seria esto:

for(i = 0; i < numImgEst; i++)
{

    /* creamos el nodo a insertar el tipo enlace ,a */
    element = Builder.node( ‘a’, {id:’oculto’, href:enlace, rel:vrel });

    /* lo encolamos al div que queremos que pertenezca */
    $(’botonizquierda’).appendChild(element)
}

Donde el id:oculto pertenece al css que no lo muestra

#botonizquierda a#oculto { display:none; }

enlace es la imagen y vrel seria el catalogo ligthbox al que pertenece

vrel = "lightbox[wallpapers]";

Con esto y un bizcocho … galeria que deja la boca-abierta sin despeinarnos.