FancyBox como alternativa a LightBox
Conozcamos un poco más la librería FancyBox como alternativa a una de las librerías de ventanas emergentes más conocidas, 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:
<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
FancyBox, una opción muy válida como alternativa si LightBox no os acaba de convencer.
Más información