Es bastante habitual encontrar paginas web que al cliquear sobre una imagen, vemos esta a pantalla completa y oscureciendo el resto de la página. Este tipo de efectos se les denomina lightbox y funcionan gracias a la implementación de librerias JQuery. Hoy vamos a ver como añadir un efecto lightbox en tu web.
Las librerías
Existen diversas librerías muy populares para conseguir un efecto lightbox. Todas ellas tienen sus efectos especiales, transiciones, etc y dependerá de el uso que vayamos a darle a nuestra galería, el elegir una u otra.
Para el ejemplo de este artículo vamos a utilizar la librería Fancybox. Aunque ya está disponible la versión 2, por su fácil implementación y sus facilidad de uso, para el ejemplo de hoy utilizaremos la versión 1, concretamente la 1.3.4
Deberemos acceder al sitio web de Fancybox y pulsar sobre el enlace situado en la zona superior derecha:
Añadiendo las librerías a nuestra web
Una vez descargado y descomprimido Fancybox, obtendremos una estructura como la siguiente:
De aquí lo que nos interesa, es la carpeta fancybox, que deberemos copiar junto con su contenido, a nuestro sitio web.
A continuación, añadiremos en la cabecera de nuestra página web, dentro de la sección <head> la llamada a la librería Fancybox:
<script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>
y la llamada a la libreria de JQuery. Para ésta utilizaremos el servicio CDN que ofrece Google:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
a continuación, deberemos incluir el código siguiente:
<script type="text/javascript">
$(document).ready(function() {
$(".miclase").fancybox();
/* efectos personalizados */
});
</script>
Y finalmente, añadiremos el fichero css de Fancybox para que se apliquen los estilos correctamente:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
Insertando las imágenes
El paso final para conseguir el efecto lightbox, sera añadir las imágenes a nuestra web. Para que funcione correctamente, deberemos crear un enlace cuya clase es la que hemos indicado en el código anterior y dentro del enlace, incluiremos la miniatura de la imagen:
<a class="miclase" href="imagen_grande.jpg" data-fancybox-group="gallery"><img alt="" src="imagen_pequeña.jpg" /></a>
El resultado obtenido, es el que pretendíamos, un efecto lightbox:
En la segunda parte del artículo, veremos como personalizar los efectos y también como crear galerías de imágenes.
