Getting Started

Lightgallery is a lightweight modular responsive jquery 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.
  • 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.

Browser support

lightgallery supports all major browsers including IE 8 and above.

Installation

Install with Bower

You can Install lightgallery and its modules using the Bower package manager.

$ bower install lightgallery

Or Install all modules together

$ bower install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share

Install with npm

You can also find lightgallery on npm.

$ npm install lightgallery
$ npm install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share

Download from Github

You can also directly download lightGallery from github.

CDN

If you prefer to use a CDN you can load files via jsdelivr

Here is the jsdelivr collection of lightGallery and its modules.

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 jQuery and lightgallery.min.js into your document.
If you want to include any lightgallery plugin you can include it after lightgallery.min.js.

<body>
    ....

    <!-- jQuery version must be >= 1.8.0; -->
    <script src="jquery.min.js"></script>
    <script src="js/lightgallery.min.js"></script>

    <!-- A jQuery plugin that adds cross-browser mouse wheel support. (Optional) -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>

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

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">
    $(document).ready(function() {
        $("#lightgallery").lightGallery(); 
    });
</script>

Support lightgallery

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