Getting Started

Lightgallery is a lightweight modular responsive light box gallery, which allows you to create beautiful image & video galleries.

Main features

  • Fully responsive.
  • Modular architecture with built in plugins.
  • Touch and support for mobile devices.
  • Mouse drag supports for desktops.
  • Double-click/Double-tap to see actual size of the image.
  • Animated thumbnails.
  • Social media sharing.
  • Youtube, Vimeo, Dailymotion, VK and html5 videos 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.
  • Accessibility support.
  • Rotate, flip images.

Browser support

lightgallery supports all major browsers including IE 9 and above.

Installation

Install with Bower

You can Install lightgallery using the Bower package manager.

$ bower install lightgallery.js

Install with npm

You can also find lightgallery on npm.

$ npm install lightgallery.js

Download from Github

You can also directly download lightgallery from github.

include CSS and Javascript files

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

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

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

<body>
    ....

    <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>
</body>  

Lightgallery also supports AMD, CommonJS and ES6 modules

When you use AMD make sure that lightgallery.js is loaded berfore lightgallery modules.

require(['./lightgallery.js'], function() {
    require(["./lg-zoom.js", "./lg-thumbnail.js"], function(){
        lightGallery(document.getElementById('lightgallery')); 
    });
  });  

The markup

lightgallery does not force you to use any kind of markup. you can use whatever markup you want. But i suggest you to use the following markup. Here you can find the detailed examples of deferent kind of markups.

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

Call the plugin

Finally you need to initiate the gallery by adding the following code.

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery')); 
</script>

Show some love

If you like lightgallery please support the project by staring the github repository or tweet about this project.