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.

(more…)

Esto de la web 2.0 dinamica y bonita con tanto movimiento en javascript que esta llevando a la muerte del flash, o por lo menos del flash "pesado", ayuda el impulso de miles y miles de librerias para programar en ajax (es bonita palabra tan usada ultimamente).

He tenido la suerte de utilizar unas cuantas de estas librerias para crear movimiento de div’s de nuestra web, modificar el contenido del DOM de forma dinamica (otra cosa que contar), crear catalogos de imagenes muy resultones y conseguir mostrar el circulito de carga mientras se terminar de carga una web.

Simplemente explicare ahora como consegui este efecto sin tener que despeinarme mucho y os pondre un pequeño ejemplo.

La libreria que use fue Protoload que necesita del framework Prototype que para hacer web 2.0 es casi indispensable.

 

El uso de esta libreria es tan sencillo que se resume en dos funciones:

• $(’nuestrodiv’).startWaiting(’ruedaCarga’);
• $(’nuestrodiv’).stopWaiting();

(more…)