Galería responsiva, justificada y con lightbox integrado

Descarga : FlexBox-Gallery

Galería responsiva, justificada y con lightbox integrado, su nombre es FlexBox-Gallery jQuery y es un plugin que te ayuda a crear galerías muy interesantes, este plugin incoluye un lightbox integrado realizado con CSS3 que sin duda le proporciona un toque elegante para nuestro sitio web o proyecto web.

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

Algo muy peculiar que tiene este plugin es que adapta las imágenes que quieres mostrar, por otro lado el código de conversión no es complicado y trabaja de forma fácil y sencilla de implementar. ademas de eso la el plugin adapta las imágenes a la pantalla sin importar el tamaño que tengan dichas imágenes.

Para su implementación se realiza lo siguiente:
1.- Creas las referencias de los archivos Css y js, en este caso usamos jQuery, flexbox-gallery.css y flexbox-gallery.js.

<link href="js/lib/flexbox-gallery.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-3.2.0.min.js"></script>
<script src="js/lib/flexbox-gallery.js"></script>

2.- Creamos la estructura de la galería que tiene un elemento div con un id llamado container (este id se usa para hacer referencia con jQuery).

<div id="container" class="container">
        <figure>
          <img src="1.jpg">
        </figure>
        <figure>
          <img src="2.jpg">
        </figure>
        <figure>
      <img src="3.jpg">
        </figure>
        <figure>
        <img src="4.jpg">
        </figure><figure>
       <img src="5.jpg">
        </figure>
        <figure>
         <img src="6.jpg">
        </figure><figure>
          <img src="7.jpg">
        </figure>
        <figure>
          <img src="8.jpg">
        </figure>
        <figure>
         <img src="9.jpg">
        </figure><figure>
          <img src="10.jpg">
        </figure>
       
      </div>

3.- Crear la conversión de los elementos HTML a la respectiva galería.

<script>
$('#container').flexgal();
</script>

Video en Youtube:

Contenido relacionado: