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 UI – Tutorial 2 – Puesta en mar... Tutorial que muestra cómo poner en marcha la librería jQuery UI. Qué debo descargar, los termas predeterminados de jQuery UI, colocar la librería en n...
JQuery – Trigger – Como ejecutar un cl... En muchos ocasiones nos puede interesar simular el click de un usuario sobre un enlace. Dicho de otro modo, provocar el click en un enlace sin que sea...
Ejemplo AJAX envío formulario con jQuery Pequeño ejemplo de utilización de AJAX para el envío de un formulario Página del formulario (pw-pac1.html) En el header function validarUsuar...
jQuery datepicker, php, mysql y las fechas en form... Veamos un caso particular a la hora de programar con jquery ui. El componente DatePicker nos proporciona una manera muy visual y eficiente de insertar...

Deja un comentario

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

*