lightGallery version 2 has been released. Please upgrade

# 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.
- Accessibility support.
- Rotate, flip images.

## 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.