[jQuery] Ejemplo de Galeria de imagenes con el plugin Nanogallery2

Nanogallery2 es un plugin de jquery/javascript que permite crear galeria de imagenes hermosas, responsive y modernas, soporta dispositivos moviles y mucho mas.

Nanogallery2 cuenta con muchas opciones para crear galerias de imagenes de gran calidad.

Nanogallery2 tiene incorporado un lightbox que muestra las imagenes en pantalla completa, ademas funciones para hacer zoom, rotar imagenes, boton anterior y siguiente imagen, y reproducir presentacion de imagenes, entre otras funciones.

Tambien se incluyen efectos al cargar las imagenes y efectos en las transiciones, posibilidad de agregar thumnails e imagenes completas.

Puedes conseguir nanogallery2 desde su pagina oficial: https://nanogallery2.nanostudio.org/

A continuacion veremos un ejemplo de uso.

Ejemplo de Galeria

Lo primero que tenemos que hacer es crear un documento html y agregar las librerias necesarias en la cabecera del documento.

<script src="jquery.min.js" type="text/javascript"></script>
<link  href="nanogallery2/dist/css/nanogallery2.min.css" rel="stylesheet" type="text/css">
<script  type="text/javascript" src="nanogallery2/dist/jquery.nanogallery2.min.js"></script>

En el body vamos a agregar un elemento contenedor de la galeria.

<div id="mygallery"></div>

Despues vamos a agregar el codigo javascript para activar las funciones de la libreria nanogallery2.

$(document).ready(function () {

  $("#mygallery").nanogallery2( {
      // Configuracion de la galeria
      thumbnailHeight:  320,
      thumbnailWidth:   320,
      itemsBaseURL:     './images/',
      
      // Contenido de la galeria
      items: [
          { src: 'img1.png', srct: 'img1.png', title: 'Imagen 1' },
          { src: 'img2.png', srct: 'img2.png', title: 'Imagen 2' },
          { src: 'img3.png', srct: 'img3.png', title: 'Imagen 3' },
          { src: 'img4.png', srct: 'img4.png', title: 'Imagen 4' },
          { src: 'img5.png', srct: 'img5.png', title: 'Imagen 5' },
          { src: 'img6.png', srct: 'img6.png', title: 'Imagen 6' },
          { src: 'img7.png', srct: 'img7.png', title: 'Imagen 7' },
          { src: 'img8.png', srct: 'img8.png', title: 'Imagen 8' }
        ]
    });
});

Como se puede ver es facil activar el plugin, solo debemos agregar ciertos parametros.

• thumbnailHeight: Altura de las miniaturas
• thumbnailWidth: Ancho de las miniaturas
• itemsBaseURL: folder o carpeta donde se guardan las imagenes
• items: Lista con las imagenes
• src: Imagen completa, solo el nombre por que la carpeta se especifica en el parametro itemsBaseURL
• srct: Imagen thumbnail, si tienes una imagen de menor resolucion la agregas aqui para acelerar el tiempo de carga, tambien solo va el nombre, la carpeta o ruta se toma de itemsBaseURL
• title: Titulo o etiqueta que llevara la imagen

En caso de que tengas las imagenes en diferentes carpetas, deben quitar el parametro itemsBaseURL y agregar la ruta completa de las imagenes en los valores src y srct segun corresponda.

Resultado

El resultado de la galeria es el siguiente.

Resultado del lightbox que se muestra al seleccionar una imagen.

Descargar

A continuacion puedes descargar el paquete que incluye codigo html, javascript, la libreria nanogallery2 y las imagenes del ejemplo.

Link: https://drive.google.com/file/d/1boFUnHG30goTTiPxsAaER6HHhfsPbVdI/view

Conclusion

El plugin nanogallery2 es sin duda un plugin que tiene muchas opciones, aqui solo usamos el funcionamiento por default, en la pagina oficial puedes explorar mas sobre esta maravillosa libreria.

Te invitamos a que compartas la informacion y nos ayudes a seguir creando contenido ;).