Galeria de Imagenes con html y jquery

En esta oportunidad mostrare como crear una sencilla gallería de imagines con HTML y JQUERY.

Cabe mencionar que ya es posible crear una galería de imágenes utilizando únicamente HTML5 pero que desde mi punto de vista todavía no es 100% factible por incompatibilidad de navegadores además de otros detalles como pesos de las imágenes, de igual forma si quieren echar un vistazo acá dejo el enlace: Galería de Imagenes con HTML5

Bien inicialmente crearemos el código HTML que será el esqueleto de nuestra página y mostrara la información e imágenes que tendrá nuestra galería.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

	<!-- CONTENEDOR PADRE DE NUESTRA GALERIA --> 
	<div id="galery">
    	<div>
        	<a href="images/montanas-verdes.jpg" title="Montañas Verdes">
            	<img src="images/tumbs/montanas-verdes.jpg"/>
            </a>
            <h3>Montañas Verdes</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a href="images/paisaje1.jpeg" title="Paisaje de Rio">
            	<img src="images/tumbs/paisaje1.jpg"/>
            </a>
            <h3>Paisaje de Rio</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a href="images/paisaje2.jpg" title="Paisaje de Lago">
            	<img src="images/tumbs/paisaje2.jpg"/>
            </a>
            <h3>Paisaje de Lago</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a href="images/paisajes-del-mundo.jpg" title="Paisajes del Mundo">
            	<img src="images/tumbs/paisajes-del-mundo.jpg"/>
            </a>
            <h3>Paisajes del Mundo</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a href="images/Paisajes-naturales.jpg" title="Paisajes Naturales">
            	<img src="images/tumbs/Paisajes-naturales.jpg"/>
            </a>
            <h3>Paisajes Naturales</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a href="images/playa.jpg" title="Playa">
            	<img src="images/tumbs/playa.jpg"/>
            </a>
            <h3>Playa</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

Ahora vamos a crear nuestro documento CSS el cual le dara una vistosidad a nuestra galeria.

1
2
3
4
5
6
7
8
9
10
11
12
13

/* ESTE SELECTOR SE PUEDE OVIAR PARA NO AFECTAR LA ESTRUCTURA DE LA PÁGINA */
*{margin:0px; padding:0px;}
 
/* ESTE SELECTOR SE PUEDE OVIAR PARA NO AFECTAR LA ESTRUCTURA DE LA PÁGINA */
body{background-color:#CCC; font-family:Calibri;}
 
#galery{width:940px; margin:20px auto; padding:10px; background-color:#FFF; overflow:hidden;}
 
#galery div{width:300px; float:left; text-align:center; margin:0 10px 15px 0;}
 
#galery div img{width:250px; height:250px;}
 
p{font-size:12pt; text-align:justify;}

Nuestro archivo CSS lo llamaremos style y lo adjuntaremos a nuestro codigo utilizando la etiqueta style dentro de la cabecera de la página (ETIQUETA HEAD) quedaria de esta forma:

<link rel="stylesheet" type="text/css" href="RUTA DEL ARCHIVO CSS">

Quedaria de la siguiente forma:

<link rel="stylesheet" type="text/css" href="style.css">

Ya con esto tendremos una estructura vistosa de imagenes con titulos y descripciones dentro de nuestro sitio, pero pudemos hacer un poco mas, podemos por ejemplo agregar un efecto popup a nuestras imagenes para que salten a la pantalla cuando el visitante de clic sobre ellas; Este efecto lo logramos utilizando el JQUERY, puedes leer al respecto desde aqui y utilizando tambien el plugin FANCIBOX del cual puedes informarte presionando aqui.

Bien primeramente nos descargamos el JQUERY y el Plugin de Fancibox

Crearemos una carpeta llamada script en nuestro proyecto y colocaremos alli los recientes archivos descargados.

Descomprimimos el winrar Fancybox y copiamos todos los archivos que se encuentran en la carpeta SOURCE y lo colocamos en la carpeta SCRIPT (Yo me he creado una subcarpeta para colocar todo esto):

galery-01

galery-02

Una vez colocados y organizado los archivos en su lugar debemos referenciar nuestra página HTML con 3 de los archivos recientementes descargados, todo esto debe hacerse en la cabecera de la página (ETIQUETA HEAD):

El primero debe ser el archivo CSS que dara vistosidad al ejemplo:

<link rel="stylesheet" type="text/css" href="scripts/FancyBox/jquery.fancybox.css?v=2.1.0"/>

El segundo y el tercero deben ser la referencia al JQUERY y al plugin FANCYBOX

<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="scripts/FancyBox/jquery.fancybox.js?v=2.1.0"></script>

Ahora debemos colocar un SCRIPT que permitira llamar a las funciones y procedimientos de los plugins:

<script type="text/javascript">
	$(document).ready(function() {
		$('.fancybox').fancybox();
	});
</script>

Para finalizar nuestra página con nuestro efecto popup, debemos agregar dos atributos a nuestros vinculos (ETIQUETAS A) los cuales serian: class=”fancybox” y data-fancybox-group=”gallery”.

La primera hara referencia al script que hemos creado para ejecutar las funciones de los plugins, es una forma de validar el sitio y especificar que el efecto solo se aplique a aquellos elementos cuya clase sea igual a fancybox; la segunda hace referencia a una clasificacion que nosotros podemos especificiar, todos los elementos que tengan el mismo nombre en su grupo formaran parte de un grupo y el usuario podra moverse en la galeria utilizando las telcas o el mouse.

Al finalizar quedaria algo asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

	<!-- CONTENEDOR PADRE DE NUESTRA GALERIA --> 
	<div id="galery">
    	<div>
        	<a class="fancybox" href="images/montanas-verdes.jpg" data-fancybox-group="gallery" title="Montañas Verdes">
            	<img src="images/tumbs/montanas-verdes.jpg"/>
            </a>
            <h3>Montañas Verdes</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a class="fancybox" href="images/paisaje1.jpeg" data-fancybox-group="gallery" title="Paisaje de Rio">
            	<img src="images/tumbs/paisaje1.jpg"/>
            </a>
            <h3>Paisaje de Rio</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a class="fancybox" href="images/paisaje2.jpg" data-fancybox-group="gallery" title="Paisaje de Lago">
            	<img src="images/tumbs/paisaje2.jpg"/>
            </a>
            <h3>Paisaje de Lago</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a class="fancybox" href="images/paisajes-del-mundo.jpg" data-fancybox-group="gallery" title="Paisajes del Mundo">
            	<img src="images/tumbs/paisajes-del-mundo.jpg"/>
            </a>
            <h3>Paisajes del Mundo</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a class="fancybox" href="images/Paisajes-naturales.jpg" data-fancybox-group="gallery" title="Paisajes Naturales">
            	<img src="images/tumbs/Paisajes-naturales.jpg"/>
            </a>
            <h3>Paisajes Naturales</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
 
    	<div>
        	<a class="fancybox" href="images/playa.jpg" data-fancybox-group="gallery" title="Playa">
            	<img src="images/tumbs/playa.jpg"/>
            </a>
            <h3>Playa</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </div>

VISTA PREVIA

DESCARGAR EJEMPLO

Recuerden comentar y compartir en sus redes sociales.

Suscribir
Notificar a
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios