Attakinsky

En la red, pueden encontrarse abundantes ejemplos de galerías de imágenes construidas con CSS y jQuery. Desde lás más tradicionales como lightbox, hasta las de última generación con efectos realmente sorprendentes, al estilo de autumn II. Pero esto no significa que el usuario esté condenado a utilizarlos siguiendo al pie de la letra los pasos para su implementación, y quedarse sin entender como funcionan. Hoy no haremos nada tan complicado, sino todo lo contrario: una galería básica que se vale de CSS y jQuery para su funcionamiento, que además vamos a explicar con detalle para que el principiante entienda bien lo que se está haciendo.

Como base, tomaremos un HTML sin adornos, que solo tendrá los elementos necesarios para la galería. En el ejemplo, trabajé con tres imágenes de 400px de ancho por 300px de alto (oso.jpg, perro.jpg y tigre.jpg). Las miniaturas o “thumbs” las reduje a un tamaño de 133px por 100px (thumb_oso.jpg, thumb_perro.jpg y thumb_tigre.jpg). Como es de esperarse, debemos incluir una hoja de estilos, y la referencia a la librería jQuery.

<div id="galeria">
    <div id="foto"><!-- espacio para la foto --></div>
    <div id="thumbs">
        <img id="oso" class="thumb" src="thumb_oso.jpg" alt="" />
        <img id="tigre" class="thumb" src="thumb_tigre.jpg" alt="" />
        <img id="perro" class="thumb" src="thumb_perro.jpg" alt="" />
        <br class="clear" />
    </div>
</div>

En este punto, salta a la vista que el bueno del HTML convirtió los saltos de línea del código que están entre las imágenes, en espacios que las separan. Este es el comportamiento normal del lenguaje, pero si deseamos que las tres miniaturas queden juntas, necesitamos hacerlo por medio del CSS con la propiedad float, sin embargo, es necesario limpiar el efecto de esa propiedad, para que el <div> contenedor, expanda de acuerdo al contenido. Por eso, asignamos un clear a una etiqueta <br>.

#galeria {
    /* ancho, borde y un pequeño margen interno para la galería */
    width: 402px;
    border: solid 1px #000;
    padding: 5px;
}
#foto {
    /* dimensiones para el area de las imágenes grandes */
    width: 400px;
    height: 300px;
    /* asignamos una imagen predeterminada, de forma arbitraria */
    background-image: url(oso.jpg);
}
.thumb {
    /* hacemos que las miniaturas se junten */
    float: left;
    /* asignamos un puntero apropiado , para orientar al usuario */
    cursor: pointer;
}
.clear {
    /* eliminamos el efecto del "float", así la galería expande */
    clear:both;
}

Nuestra pequeña galería ya tiene forma, según se puede apreciar en la siguiente imagen:

Vista previa de la galería

Hemos colocado a las miniaturas un puntero de selección para cuando el usuario, mueva el Ratón sobre ellas. Lo único que falta entonces es hacer que cuando el puntero este sobre una de las imágenes pequeñas, su similar de mayor tamaño aparezca en el espacio asignado. Una forma rápida de conseguirlo es por medio de jQuery.

// nuestro script estará disponible cuando el todo documento haya terminado de cargarse
$(document).ready(function(){
    // luego, el truco deberá realizarse únicamente cuando el usuario mueva el puntero sobre las miniaturas
    $('.thumb').mouseover(function(){
        // obtenemos el valor del atributo ID de la miniatura
        var imagen = this.id;
        // luego, asignamos ese valor, como fondo del <div> con ID "foto"
        $('#foto').css('background-image', 'url(' + imagen + '.jpg)');
    });
});

La lógica no es realmente complicada cuando se comprende su funcionamiento. En la linea número cuatro, básicamente estamos declarando que el cambio de imagen debe realizarse cuando el usuario mueva al puntero (evento mouseover) sobre las imágenes en miniatura (que tienen una clase “thumb”). Esto garantiza que el código funcionará con las tres miniaturas. Pero, ¿como sabemos cual de las tres es la que el usuario ha activado?

La sexta línea tiene esa respuesta: el objeto this es la referencia a la imagen sobre la cual se encuentra el apuntador del Ratón. Hay tres que tienen la clase “thumb”, pero solo una tiene sobre ella el puntero, y el objeto this tiene todos sus datos. Supongamos entonces que la miniatura seleccionada es la del tigre, entonces la variable imagen almacenará el valor de su atributo “id” (en este caso, la palabra “tigre”).

Finalmente en el octavo renglón, cambiamos “en el aire” el CSS del <div id=”foto”>. JQuery nos permite hacerlo, indicándole que vamos a alterar la propiedad “background-image”, asignándole el valor “url(tigre.jpg)”. ¡Hey! La variable imagen solo tiene la palabra “tigre”, entonces ¿como hacemos?. Simplemente construimos nuestra cadena concatenado (uniendo o pegando) los segmentos con nuestra variable mediante el signo de suma.

Listo, con esas pocas líneas hacemos un cambio de la imagen principal sin recurrir a la instalación de plugins adicionales. Es bastante sencilla, pero cuando se va profundizando en el aprendizaje de jQuery, se puede agregar una buena cantidad de efectos para mejorar su impresión en el usuario.

Descargar el ejemplo

Entradas relacionadas

• 18/09/2009 -- Combos encadenados usando AJAX (jQuery) (14)
• 03/09/2009 -- Primer AJAX con jQuery (11)
• 27/08/2009 -- Introducción a jQuery (12)
• 01/03/2010 -- Datos duplicados al actualizar (9)
• 14/11/2009 -- JSON para principiantes (19)