Efecto lightbox en tu web

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:

fancybox-libreria

Añadiendo las librerías a nuestra web

Una vez descargado y descomprimido Fancybox, obtendremos una estructura como la siguiente:

fancybox-1

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="http://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:

fancybox-2

En la segunda parte del artículo, veremos como personalizar los efectos y también como crear galerías de imágenes.

 

Facebooktwittergoogle_plus