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

TimePicker trabajar con horas en jQuery Ui Los que utilizamos jQuery UI para crear nuestros paneles de administración, disponemos de un widget, datepicker, que nos permite trabajar con fechas. ...
jQuery – Seleccionar opción de un desplegabl... Si buscáis por internet cómo seleccionar valores de un desplegable con jQuery os saldran multitud de ejemplos en los que todo el mundod ice que les fu...
elrte – Editor de texto WYSIWYG para tus apl... Os damos a conocer uno de los editores de texto mas completos que existen para tus aplicaciones web, elrte. Cómo se utiliza ? Primero hay que de...
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 *

*