Fancy Box 2 – Lightbox con efectos css3 responsivo con jQuery

Fancy Box es un plugin jQuery que esta 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.
• Esta 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 Fancy Box 2 – Lightbox con efectos css3 responsivo con jQuery appeared first on Develoteca.