Crea un galería de tus imágenes favoritas con Smooth Gallery

11
1847

Smooth Gallery 1.0 es un sistema de galería de imágenes desarrollado con mootools v1.0 la cual nos permite navegar por las imágenes de la galería, ver una muestra pequeña de la imagen que deseamos ver completa, muestra una pequeña descripción de la imagen actual, determinar el tiempo que se mostrará una imagen, y entre otras opciones que podemos configurar.

Como usarlo

Bien, no quiero reeemplazar las instrucciones de uso del autor (que están en inglés), así que iré al grano especificando los pasos necesarios para configurar y usar Smooth Gallery en nuestros proyectos web.

Descargamos los archivos necesarios de la página del autor. Podemos elegir entre formatos .zip o tar.gz. Para nuestro ejemplo usaremos el .zip. (Aunque finalmente es lo mismo).

Descomprimimos el archivo y tendremos una estructura similar a la imagén abajo. Aunque existe un archivo demo.html, vamos a crear nuestro propio ejemplo-demo. Así que abrimos nuestro editor de páginas web preferido, y creamos nuestra página y la guardamos con el nombre test.html y lo ubicamos en el mismo directorio que descomprimimos.

Smooth Instalar

Ahora entre las etiquetas <head></head>, incluimos los archivos de JavaScript y CSS que usaremos:

<head>
<title>Usando SmoothGallery</title>
<script src="scripts/mootools.js" type="text/javascript"></script>
<script src="scripts/jd.gallery.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" />
</head>

Ahora prepararemos la estructura a través de capas. Nos ubicamos entre las etiquetas <body></body> y escribimos lo siguiente:

<div id="myGallery">
<div class="imageElement">
<h3>Imagen 1</h3>
<p>Una descripcion de la imagen 1.</p>
<a href="imagen1.html" title="open image" class="open"></a>
<img src="images/brugges2006/1.jpg" class="full" />
<img src="images/brugges2006/1-mini.jpg" class="thumbnail" />
</div>
<div class="imageElement">
<h3>Imagen 2</h3>
<p>Una descripcion de la imagen 2.</p>
<a href="imagen2.html" title="open image" class="open"></a>
<img src="images/brugges2006/2.jpg" class="full" />
<img src="images/brugges2006/2-mini.jpg" class="thumbnail" />
</div>
</div>

Vamos a explicar el código. La capa principal de todas las imágenes es "myGallery" y esta asociada a un estilo. Bien hasta allí no hay problema. Ahora le sigue una capa "imageElement" que específica un elemento dentro de la galería. En este caso vemos 2 de estos elementos. Dentro de cada capa podemos apreciar características de la imagén como:

  • El título (que va en las etiquetas h3),
  • Una pequeña descripción (dentro de las etiquetas de <p>) ,
  • Un enlace a una página html que mostrará la imagén completa,
  • Imagén en tamaño completo y, finalmente,
  • La imagén en formato pequeño.

Como mencionamos en el segundo punto, cada capa "imageElement" tiene un enlace a una página, en este caso a imagen1.html e imagen2.html. Así que crearemos estas 2 páginas, cada una con la imagén que será mostrada en la galería.

Llamamos a este archivo imagen1.html, podemos seguir la misma estructura para el archivo imagen2.html, simplemente cambiamos el título, la cabecera h3 y la nombre de archivo de la imagen.

<html>
<head>
<title>Imagen 1</title>
</head>
<body>
<h1>Viendo la Imagen 1</h1>
<img src="images/brugges2006/1.jpg" width="460" height="345" />
</body>
</html>

Ahora elegiremos que tipo de galería usaremos. El autor muestra 4 formas, así que en este ejemplo solo usaremos una: la galería por defecto; con sus flechas de desplazamiento, titulo y descripción al pie de la imagen y con un pequeño explorador de imagenes en la parte superior de la imagen. Este código lo escribimos después de la etiqueta de cierre </div> de la capa <div id="myGallery">.

 <script type="text/javascript">
function startGallery() {
var myGallery = new gallery($('myGallery'), {
timed: false
});
}
window.onDomReady(startGallery);
</script>

Eso es todo! Ya tenemos nuestra galería de dos imágenes, podemos desplazarnos por la imagenes, ver su titulo y descripción, además de unas muestras en miniatura en la parte superior.

Si conoce algo de PHP puede crear la estructura dentro de las etiquetas <div id="myGallery"></div> de manera dinámica, quizás mediante un bucle. Bueno ya es imaginación de cada uno como usarlo de la mejor manera. Puede ver nuestro ejemplo y descargarlo.

11 COMENTARIOS

  1. Realmente es muy claro tu explicacion sobre galeria de imagenes.
    Te agradezco tu aporte.
    Tengo un problema: en el archivo CSS no encuentro .imageElement
    creo que por eso no es perfecto el trabajo de prueba que estoy haciendo.
    La falla es en el enlace para avanzar paginas.
    Te agradeceria me ayudes al respecto.

    muchas gracias.

  2. La clase .imageElement no esta en el archivo CSS, esta clase se define dentro del archivo JavaScript jd.gallery.js. Así que si deseas cambiarle el nombre a la clase creo que no funcionaría a menos que modifiques el archivo JavaScript.

  3. Hola, me podéis decir si sabéis como insertar un archivo de sonido al cargar una imagen, segun carga la imagen reproduce un sonido diferente para cada una de las imagenes.

  4. Tengo una web inmobiliaria y no se como incluir php a esta galeria para que muestre un set de imagenes asociadas a un id de la propiedad. Si me oueden ayudar se los agradezco mucho.

    Gracias

  5. muy buen aporte a todo el q sigue los pasos les sirve pero deberian colocar mas etiquetas mas complicadas para motivar y ayudar a los novatos

  6. Hola que tal, el blog es algo viejo, pero tengo una duda:

    Por que todas las imagenes se cargan al visitar la galeria?

    es decir, tengo 10 albumes, visito la pagina inicial y al momento de visitarla TODASSS las imagenes se cargan!!!

    Un desperdicio de banda ancha, porque si mis 10 albumes pesan un total de 30 mb, primero carga los 30 mb, en vez de carga imagen por imagen al visitar la imagen

  7. como le hago si en caso quiero mostrar esa galeria pero en dimensiones de 200 * 300?
    no he logrado hacer que funcione correctamente…
    (yo ya me encargo de modificar el tamaño a las fechas; pero no consigo hacer que la galeria funcione bien)

    Gracias

  8. Hola buenas tardes solo quisiera saber si se podria modificar la galeria para q me muestra solo una imagen… en donde le tengo q modificar… y si son 2 imagenes o mas me las sigan mostrando… que pueda tener esos dos casos….

  9. Muy bien explicado pero faltan muchas cosas , ¿como puedo determinar el tiempo de transición entre las imágenes? , ¿como combinar esto con php? etc etc..

    Un saludete

  10. Hola!!!
    Muy bueno el aporte, me animó a utilizar la aplicación!!!

    Comentar que consigo que funcione todo, a excepción de que cuando subo todo al servidor, las fotos en pequeño dentro de cada album no aparecen.

    He revisado el código 1000 veces y no encuentro el fallo.

    ¿Alguien podría ayudarme?
    Gracias de antemano

    _________________________________________________

Comments are closed.