limoon: ver el demo aqui

INSTRUCCIONES: Para usar la galeria solo hay que colocarse sobre la tira de imagenes y usar la ruedita del raton para navegar si das click en una miniatura la imagen se mostrara en la ventana principal en tamano mediana.

Descargar el codigo fuente aqui

Esta galeria de imagenes ha sido implementada utilizando las siguientes herramientas:

• php ( muy basico )
• html (extremadamente sencillo)
• css
• mootools

La galeria es crossBrowser:

• internet explorer 6+
• Firefox 3.5
• Safari 4.0 para windows

Como configurar esta galeria

Lo unico que hay que hacer es colocar la carpeta de la galeria en tu servidor, dentro de la carpeta raiz debe de haber un directorio llamado galeria que debe contener las imagenes en el siguiente formato.

• Las imagenes deben ser del formato gif, jpg, png
• Cada imagen sin exepcion debe tener una miniatura
• Tamano exacto de imagenes medianas altura:270px, tamano exacto de imagenesminiaturas altura:50px
• Para cada imagen mediana agregar el prefijo “med_” y para cada miniatura agregar el prefijo “thumb_”

Para mas facil un ejemplo, supongamos que quieres que en tu galeria aparezca la imagen miabuelo.jpg, entonces en el directorio galeria debes poner 2 imagenes, una se llamaria med_miabuelo.jpg con altura de 270px y la otra seria thumb_miabuelo.jpg de altura 50px. Y lo mismo pasa para cualquier otra imagen que quieras agregar a la galeria. En el demo de la galeria veras que todas las miniaturas estan en blanco y negro eso lo hize solo para seguir la linea de diseño de la galeria.

Actualmente hay muchos programas en la red que te permiten cambiar el tamano a las imagenes de todo un directorio de forma automatica y agregarles prefijo a la nuevas imagenes, solo es cuestion de hacer una busqueda en google y listo.

Dentro del directorio de la galeria hay un dir llamado mootools que contiene la version completa de mootools con todos sus plugins y pesa mas o menos como 300kb, lo he dejado asi porque es la version con la que hago mis experimentos, pero tu puedes conseguir tu propia version de mootools del sitio oficial y modificarla para reducir el peso y dejar solo lo necesario para la galeria. Principalmente he usado el core y los Asset.image

Implementacion

pues despues de una depresion fuerte y algunos dolores de cabeza tratando de aprender mootools, he implementado una galeria de imagenes le puse “limoon” nomas porque me gusto el nombre XD.

Al inicio la idea que tenia era hacer todo un sistema de galeria de imagenes que tuviera un panel

de control en php que me permitira administrar todas las imagenes de la galeria, hacer login, hacer uploads, agregar descripciones, titulos, borrar imagenes etc.. pero luego recorde que mi objetivo principal era aprender mootools asi que deje de lado lo anterior y solo me enfoque en la galeria.

Sin embargo inclusive en este momento y a este nivel de codifcacion de la galeria es posible implementar el panel e integrarlo con la galeria, la unica informacion que hasta el momento recibe js del php es una cadena con los nombres de las imagenes que hay en un directorio y listo.

Una vez aclaro que estas son mis primeras lineas de codigo en mootools, lo primero que escribi con mootools fue el moochat estara por ahi si lo buscas en la categoria “aprendiendo mootools”, y funciona ..pero solo en internet explorer y el codigo esta bastante horrible diria yo, inclusive el codigo de esta galeria podria mejorarse, no me molesta tanto pues llevo apenas 2 semenas leyendo la referencia de mootools, y ya comienzo a ver las cualidades de mootools

Al principio solo la sintaxis me parecia totalmente extraña y antinatural, ahora ya me resulta mas familiar y veo que tiene muchas funciones muy utiles, por ejemplo me llama mucho la atencion la clase Drag, estoy pensando en hacer algo con dicha clase, pero aun no se que podria ser.

Por el momento preparo un documento en que explicare el proceso de creacion de esta galeria, y sigo escribiendo la referencia de mootools, porque si algo he buscado si suerte en la internet es una buena referencia de mootools en español y bien documentada, pues a veces puede ser complicado aprender un lenguaje solamente tomando los documentos de la referencia oficial y aparte en ingles :S, no es que no sepa ingles.. pero carajo es mas sencillo en español.