FancyBox como alternativa a LightBox

La mayoría de vosotros ya conocerá LightBox como una de las librerías JavaScript mas famosas para crear atractivas galerías de fotos con sus respectivas ampliaciones y funciones de usabilidad (pasar fotos como diapositivas, aplicar efectos…).

Pues hace ya un tiempo, que descubrimos FancyBox

como plugin para jQuery, que permite hacer igual o mas funcionalidades que LightBox.

Os pongo un pequeño ejemplo de código comentado para que veáis como funciona:

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
<html>
<head>
// Llamamos a la librería jQuery (aquí debéis actualizar a la última versión de jQuery)
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
// Llamamos a la librería FancyBox
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
// Llamamos a la librería easing si hacemos servir transiciones
<script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
// Llamamos a la librería mousewheel si queremos que las fotos se vayan mostrando conforme movamos la rueda del ratón
<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
 
// Llamamos la hoja de estilo de Fancy
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body>
 
<h1>La galería de fotos</h1>
 
<a class="galeriafotos" rel="galeria" href="./photos/image_big_1.jpg"><img src="./photos/image_small_1.jpg" alt=""/></a>
<a class="galeriafotos" rel="galeria" href="./photos/image_big_2.jpg"><img src="./photos/image_small_2.jpg" alt=""/></a> 
 
<script type="javascript">
$("a.galeriafotos").fancybox({
	'transitionIn'	:	'elastic',
	'transitionOut'	:	'elastic',
	'speedIn'	:	600, 
	'speedOut'	:	200, 
	'overlayShow'	:	false
});
</script>
</body>

Como podéis comprobar, en la primera parte del código cargamos las librerías necesarias y las hojas de estilo. Todas estas librerías están disponibles cuando descargas la librería de su página oficial.

La segunda parte, listamos las imágenes. Aquí tendremos en cuenta varias cosas:

  • Todos los enlaces se les asignará la misma clase. En este caso ‘class=galeriafotos’
  • Todos los enlaces contendrán la etiqueta ‘rel=galeria’ para que Fancybox detecte que todas pertenecen a la misma galería y por tanto, nos permita recorrer las fotos una vez estén ampliadas
  • El enlace apunta a la imágen grande, y la imagen que se muestra es la pequeña.

Y por último, la llamada a la función Fancybox sobre los enlaces con la clase galeriafotos: ‘$(“a.galeriafotos”).fancybox({‘. A esta función, le pasamos parámetros como opción para hacer la galería a nuestro gusto. Encontraréis todas las opciones en el api de FancyBox

Una opción muy válida si LightBox no os acaba de convencer.

Artículos relacionados

jQuery – Crear botón imágenes que cambian Veamos el código necesario para crear un enlace en forma de imagen, que al pasar el botón por encima (hover) cambia a otra imagen. Un ejemplo sería te...
jQuery como seleccionar una opción de Select Código muy práctico para utilizarlo una vez recibimos datos vía AJAX y debemos seleccionar una de las opciones: Tarragona Albacete Castellón A...
jQuery – validar grupo de checkbox con jQuer... Existe un pligin llamado Validate que puede utilizarse para validar un formulario. Seguro que muchos de vosotros ya lo sabréis. Pero cómo validamos qu...
Enviar formulario con jQuery AJAX Partimos de la premisa que tenemos un formulario creado, y queremos enviar los datos con AJAX. Dicho de otro modo, enviaremos el formulario sin marcha...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*