Full-Featured Lightbox Gallery With Pure JavaScript | lightgallery.js

Lightgallery.js only uses CSS to resize pictures and videos. It will be very flexible, and much faster than using the JavaScript approach.

Light gallery JS supports touch and swipe navigation on touchscreen devices, as well as mouse drag for desktop devices. This allows users to move between slides either by dragging or dragging with the mouse.

Table of Contents

Browser support

light gallery supports all major browsers including IE 9 and above.

Main features

  • Fully responsive.
  • Modular architecture with built-in plugins.
  • Touch support for mobile devices.
  • Mouse drag supports for desktops.
  • Double-click/Double-tap to see the actual size of the image.
  • Animated thumbnails.
  • Social media sharing.
  • YouTube, Vimeo, Dailymotion, VK, and HTML5 video support.
  • 20+ Hardware-Accelerated CSS3 transitions.
  • Dynamic mode.
  • Full-screen support.
  • Supports zoom.
  • Browser history API.
  • Responsive images.
  • HTML iframe support.
  • Multiple instances on one page.
  • Easily customizable via CSS (SCSS) and Settings.
  • Smart image preloading and code optimization.
  • Keyboard Navigation for desktop.
  • Font icon support.
  • Rotate, and flip images.
  • And many more.

Must Read: Responsive Image Gallery & Lightbox Plugin using Bootstrap

How to make use of it:


npm install lightgallery.js

1. First of all, add lightgallery.css in the <head> of your document.

    <link rel="stylesheet" href="css/lightgallery.css">

2. Then include lightgallery.min.js in your document. If you want to include any lightgallery plugin, you can include it after lightgallery.min.js.


    <script src="js/lightgallery.min.js"></script>

    <!-- lightgallery plugins -->
    <script src="js/lg-thumbnail.min.js"></script>
    <script src="js/lg-fullscreen.min.js"></script>

3. Lightgallery also supports AMD, CommonJS, and ES6 modules. When using AMD, be sure to load lightgallery.js before the light gallery modules.

require(['./lightgallery.js'], function() {
    require(["./lg-zoom.js", "./lg-thumbnail.js"], function(){

4. The markup:

<div id="lightgallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg">
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg">

5 Finally, you need to start the gallery by adding the following code.



Must Read: A simple Pure CSS Image Gallery lightbox | CSSBox

  1. Thumbnails
  2. Gallery with animated thumbnails
  3. Gallery without animated thumbnails
  4. YouTube, Vimeo Video Gallery
  5. YouTube, Vimeo Video Gallery
  6. Video Gallery Without Poster
  7. Video Player Parameters
  8. Automatically load thumbnails
  9. HTML5 Video Gallery
  10. HTML5 Video Gallery
  11. HTML5 video gallery with videojs
  12. Transitions
  13. Dynamic
  14. Events
  15. Methods
  16. Iframe. External websites, Google map, etc.
  17. Captions
  18. Responsive images
  19. Responsive images
  20. Responsive images with HTML5 srcset
  21. Gallery with fixed size
  22. HTML Markup
  23. Facebook comments
  24. Easing
  25. History/hash plugin
  26. Social media share

Built-in modules

  • Thumbnail
  • Autoplay
  • Video
  • Fullscreen
  • Pager
  • Zoom
  • Hash
  • Share
  • Rotate

See Demo And Download


Official Website(sachinchoolur): Click Here

This superior jQuery/javascript plugin is developed by sachinchoolur. For extra Advanced Usage, please go to the official website.

Related Posts


A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on the selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with…


A Quick jQuery-Based Country Picker With Flags | Country Select JS

Country Select JS is a jQuery plugin to select a country, based on the international phone input plugin. Adds a flag dropdown to any input, which lists…


Simple and Fast Autocomplete and Typeahead Javascript Library | autoComplete.js

autoComplete.js is a simple, pure, and incrementally designed JavaScript library for speed, high versatility, and seamless integration with a wide variety of projects and systems. Features Pure…


Bootstrap Notification Message Alert Plugin with jQuery

BootstrapMsg is a jQuery plugin for displaying messages with Bootstrap alert classes to generate hierarchical in-page navigation for an extended webpage sectioned by heading components. Using Bootstrap…


jQuery Plugin for Transforming HTML Tables Into Charts Using Google Charts

Chartinator is a jQuery plugin for converting HTML tables, Google Sheets and js arrays into charts using Google Charts. Use data from HTML tables Chartinator is designed…


Customizable & Composable Charts for VueJS | vue-wcharts

WCharts is a library that makes it easy to create your own charts using Vuejs. You can easily create reusable chart components. Use a basic layout or…

Leave a Reply

Your email address will not be published. Required fields are marked *