Galería responsive en HTML con FancyBox 2, css3 y jQuery


Fancy Box es un plugin jQuery que está basado en FancyBox, en esta versión del plugin se agregan las siguientes cualidades:

  • Diseño responsive
  • Presentación tipo slider
  • Esquinas redondeadas
  • Opciones extras para personalizar el Lightbox
  • Soporta el MouseWheel y el teclado para pasar de imagen a imagen
  • Soporta la mayoría de los contenidos como HTML,text,Ajax,Iframe, Videos, ademas de imágenes.
  • Está probado para :IE7/8/9/10, Chrome, firefox, safari, opera, etc.

Demostración: https://oscaruhp.github.io/FancyBoxClone/ 

Para usar el plugin se hace de la siguiente forma:

1.- Incluir los scripts de jQuery, el plugin de fancybox

[html]
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="js/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.fancybox.css" media="screen" />
[/html]

2.- Crear el grupo de imágenes y agregarles la clase fancybox, como se hace en el siguiente código

[html]
<a class="fancybox" href="1_b.jpg" data-fancybox-group="gallery" title="Imagen 1">
<img src="1_s.jpg" alt="" />
</a>
<a class="fancybox" href="2_b.jpg" data-fancybox-group="gallery" title="Imagen 2">
<img src="2_s.jpg" alt="" />
</a>
<a class="fancybox" href="3_b.jpg" data-fancybox-group="gallery" title="Imagen 3">
<img src="3_s.jpg" alt="" />
</a>
[/html]

3.- Llama a la función de conversión de JQuery con el siguiente script:

[html]
<script> $(document).ready(function() {
$(‘.fancybox’).fancybox();

});
</script>
[/html]

4.- Agrega características adicionales, como se muestra en el siguiente fragmento:

[html]
<script>
$(document).ready(function() {
$(‘.fancybox’).fancybox({ keyboard : true });

});
</script>
[/html]

[adjuntos descripcion=”FancyBox 2″ link=”github.com/oscaruhp/FancyBoxClone/archive/master.zip”]