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
<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" />
2.- Crear el grupo de imágenes y agregarles la clase fancybox, como se hace en el siguiente código
<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>
3.- Llama a la función de conversión de JQuery con el siguiente script:
<script> $(document).ready(function() {
$('.fancybox').fancybox();
});
</script>
4.- Agrega características adicionales, como se muestra en el siguiente fragmento:
<script>
$(document).ready(function() {
$('.fancybox').fancybox({ keyboard : true });
});
</script>
The post Galería responsive en HTML con FancyBox 2, css3 y jQuery appeared first on Develoteca.