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):
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> |
Recuerden comentar y compartir en sus redes sociales.