1. Products
  2.   Image
  3.   JavaScript
  4.   LightGallery
 
  

Responsive and Customizable Image Gallery Plugin

Lightgallery.js is a useful and open source image resizer and customizer.

Lightgallery.js is a useful and highly customizable plugin that is perfect for projects that require a lot of features when it comes to loading and displaying videos and images on websites. Developed completely in JavaScript and CSS, it is a full featured lightbox gallery that offers developers many options.

As an open source, free-to-use plugin Lightgallery.js comes in handy when you need those extra options other than resizing and uploading image and video assets to your website in the form of a gallery. It also stores the browser history of the images and videos in a slide and provides a unique URL for each gallery image. Not only is it fast but a lightweight, modular, responsive lightbox gallery creator that doesn’t hinder memory performance.

Previous Next

Getting Started with LightGallery

The recommended way to install LightGallery via NPM. Please use the following command to install it.

Install LightGallery via NPM

 npm install lightgallery.js

Free JavaScript API for Image Manipulation

Lightgallery.js comes with many built-in modules like creating thumbnails, full screen, zoom in and out, etc. which can be discarded if you don’t need them. You can also add your own modules depending on the requirement of your project. As opposed to the JavaScript method of resizing images and videos, Lightgallery.js uses a CSS only approach for responsive resizing making it considerably faster and more flexible. By simply updating the SASS variables of your gallery you can easily customize the plugin to fit your needs.

Create Thumbnails via Free JavaScript API

When it comes to thumbnails, Lightgallery.js allows you to enable animated thumbnails just like YouTube to give a more modern feel. Animated thumbnails can also be activated for your YouTube or Vimeo gallery. Lightgallery.js comes with more than 20 animations built in the plugin that can be used to create beautiful galleries.

Create Static Thumnails Gallery via JavaScript

 lightGallery(document.getElementById('static-thumbnails'), {
    animateThumb: false,
    zoomFromOrigin: false,
    allowMediaOverlap: true,
    toggleThumb: true,
});

Customize Thumnails Gallery Creation via JavaScript

 lightGallery(document.getElementById('customize-thumbnails-gallery'), {
    // Add a custom class to apply style only for the particular gallery
    addClass: 'lg-custom-thumbnails',

    // Remove the starting animations.
    // This can be done by overriding CSS as well
    appendThumbnailsTo: '.lg-outer',

    animateThumb: false,
    allowMediaOverlap: true,
});
 English