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.

Información relacionada

Deja un comentario

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

*