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 – Cómo seleccionar una opción de Sele... Ya vimos en artículos anteriores cómo seleccionar una opción de un desplegable (select) por su valor. En este artículo vamos a ver cómo seleccionarlo ...
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...
jQuery 2.0 no da soporte a Internet Explorer 6,7 y... Las últimas noticias indican que la nueva versión de jQuery, no dará soporte a Internet Explorer 6,7 y 8. Un duro golpe a Microsoft, y a los usuarios ...

Deja un comentario

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

*