Abrir una galería de imágenes con Fancybox 1.3.4
FancyBox es una herramienta para la visualización de imágenes, contenido HTML y multimedia al estilo “lightbox” flotante sobre la página web.
En este artículo vamos a ver como abrir una galería de imágenes en una ventana modal utilizando Fancybox.
Lo primero que tendremos que hacer es ir a la página oficial de Fancybox para descargar el script y ver más información.
Una vez tenemos los archivos necesarios en nuestro servidor podemos empezar a añadir a nuestra página HTML el efecto Fancybox.
En nuestra cabecera o <head> deberemos añadir los estilos y scripts necesarios:
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
Hará falta la librería jQuery y los scripts y estilos de Fancybox, además de la llamada a la función fancybox() que tras pulsar en un elemento o imagen del grupo de imágenes se abrirá en una nueva ventana y se tendrá la opción de pasar a la siguiente imagen pulsando en la flecha de siguiente.
En nuestro <body> deberemos añadir el link con la imagen reducida que tras pulsarlo abrirá ampliada esta misma imagen.
<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a> <a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a> <a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a> <a rel="example_group" href="./example/12_b.jpg" title=""><img alt="" src="./example/12_s.jpg" /></a>
Para que funcione correctamente es vital el uso del atributo «rel» del elemento «a» para unir estas 4 imágenes en un grupo o galería de imágenes.
Autor
Te ha servido? Valora esta entrada!
Comparte en las redes sociales
¿Buscas trabajo de programador?
Hola!
He hecho la galería vinculada a la base de datos (php). Pero me gustaría que, aunque en la base de datos haya muchas fotos, la galería solo me mostrara 3.
¿Sabes cómo podría hacerlo?
Gracias 😉
Hola,
Si, limitando la consulta con LIMIT 0,3 por ejemplo al final de la query.
Saludos
Sabes como agregar también un video de youtube, y que este relacionado con más fotos como de galería.
si, en la página oficial de fancybox hay algún ejemplo
Hay manera de hacer el carrusel que tienes justo arriba sin tener que usar Fancybox, solamente html y css?
NO es el único plugin que existe para hacer eso. Existen más si googleas un poco. Con html y css únicamente no creo que se pueda.
Y para usarlo en WordPress cómo sería su funcionamiento
hola buenas tardes,
Para añadirlo en wordpress posiblemente haya algún plugin ya preparado pero si lo quieres añadir de forma manual a algún template y no sabes como hacerlo nosotros podríamos ayudarte pero debes contactar con blog@jose-aguilar.com
Saludos