Galería de imágenes en miniatura de navegación con jQuery

En este tutorial vamos a crear una extraordinaria galería con miniaturas desplazable que se deslizan hacia fuera de la navegación. Vamos a usar jQuery y algunas propiedades de CSS3 para el estilo. La idea principal es tener un menú de álbumes en el que cada elemento se muestran en una barra horizontal con miniaturas cuando se hace clic. El contenedor de imágenes en miniatura se desplazará de forma automática cuando el usuario mueve el ratón hacia la izquierda o la derecha.

Cuando se hace clic en una miniatura que se carga como una previsualización de la imagen completa en el fondo de la página. También tendremos un contenedor de texto para uno de los elementos de menú.

Las fotos son hermosas photostream de Marcos Sebastian en Flickr. Usted puede encontrar todas las imágenes utilizadas en la demostración en el conjunto de "IT" Factor. Por favor revise la licencia de Creative Commons que se incluye en la demostración.

Por lo tanto, vamos a empezar!

 

The Markup

Nuestro HTML es principalmente va a consistir en una capa y de la lista del menú. Vamos a tener algunos otros elementos, como la imagen completa, el div de carga y la superposición de medios tonos. En primer lugar, vamos a crear la envoltura:

1	<div id="st_main" class="st_main">

2

3

div>

 

Dentro de nuestro contenedor vamos a añadir lo siguiente:

 

1	<img src="images/album/1.jpg" alt="" class="st_preview" style="display:none;"/>

2

3	<div class="st_overlay">div>

4

5	<h1>Mark Sebastianh1>

6

7	<div id="st_loading" class="st_loading">

8	<span>Loading...span>

9

div>

 

 El primer elemento es nuestra imagen de vista previa completa. La plantilla va a ser un div fija que se extenderá por toda la pantalla repitiendo un patrón de medios tonos para crear un efecto de superposición de lujo en la imagen. También vamos a añadir un título y un div de carga.
A continuación, añadir una lista desordenada en la que cada elemento li va a contener un palmo de su título y la envoltura de las miniaturas. El elemento li última va a contener un contenedor para el texto, por eso no lo vamos a dar la clase "álbum". Más tarde, en la función de jQuery tendremos que distinguir este.

 

Sigue el Manual completo:  

Via: Tympanus

Visto en: Blog Informatico