jQuery Gallery LightBox Plugin

Gallery LightBox is a javascript library that allows the user create light box gallery. Gallery LightBox allows you to view images in full screen mode and it also create animated thumbnails for your gallery. You can navigate between images by clicking navigation arrows. In addition, you can add description information for images in your gallery. You can also zoom in or zoom out images and use auto play to display images in your gallery.

Features:

Thumbnails support
Fully Responsive
FullScreen support
Browser features control (scrollbar, mousewheel, right click prevention)
Keyboard and mouse wheel support (navigate and zoom)
Auto play
Zoom In or Zoom out images

Live Demo

How to Use

Add the css below to your html page

<link rel="stylesheet"
    href="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/css/lightgallery.css" />
<style type="text/css">
    .demo-gallery>ul {
        margin-bottom: 0;
        list-style: none !important;
    }

    .demo-gallery>ul>li {
        float: left;
        margin-bottom: 15px;
        margin-right: 20px;
        width: 200px;
    }

    .demo-gallery>ul>li a {
        border: 3px solid #FFF;
        border-radius: 3px;
        display: block;
        overflow: hidden;
        position: relative;
        float: left;
    }

    .demo-gallery>ul>li a>img {
        -webkit-transition: -webkit-transform 0.15s ease 0s;
        -moz-transition: -moz-transform 0.15s ease 0s;
        -o-transition: -o-transform 0.15s ease 0s;
        transition: transform 0.15s ease 0s;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        height: 100%;
        width: 100%;
    }

    .demo-gallery>ul>li a:hover>img {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    .demo-gallery>ul>li a:hover .demo-gallery-poster>img {
        opacity: 1;
    }

    .demo-gallery>ul>li a .demo-gallery-poster {
        background-color: rgba(0, 0, 0, 0.1);
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transition: background-color 0.15s ease 0s;
        -o-transition: background-color 0.15s ease 0s;
        transition: background-color 0.15s ease 0s;
    }

    .demo-gallery>ul>li a .demo-gallery-poster>img {
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        opacity: 0;
        position: absolute;
        top: 50%;
        -webkit-transition: opacity 0.3s ease 0s;
        -o-transition: opacity 0.3s ease 0s;
        transition: opacity 0.3s ease 0s;
    }

    .demo-gallery>ul>li a:hover .demo-gallery-poster {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .demo-gallery .justified-gallery>a>img {
        -webkit-transition: -webkit-transform 0.15s ease 0s;
        -moz-transition: -moz-transform 0.15s ease 0s;
        -o-transition: -o-transform 0.15s ease 0s;
        transition: transform 0.15s ease 0s;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        height: 100%;
        width: 100%;
    }

    .demo-gallery .justified-gallery>a:hover>img {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }

    .demo-gallery .justified-gallery>a:hover .demo-gallery-poster>img {
        opacity: 1;
    }

    .demo-gallery .justified-gallery>a .demo-gallery-poster {
        background-color: rgba(0, 0, 0, 0.1);
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        -webkit-transition: background-color 0.15s ease 0s;
        -o-transition: background-color 0.15s ease 0s;
        transition: background-color 0.15s ease 0s;
    }

    .demo-gallery .justified-gallery>a .demo-gallery-poster>img {
        left: 50%;
        margin-left: -10px;
        margin-top: -10px;
        opacity: 0;
        position: absolute;
        top: 50%;
        -webkit-transition: opacity 0.3s ease 0s;
        -o-transition: opacity 0.3s ease 0s;
        transition: opacity 0.3s ease 0s;
    }

    .demo-gallery .justified-gallery>a:hover .demo-gallery-poster {
        background-color: rgba(0, 0, 0, 0.5);
    }

    .demo-gallery .video .demo-gallery-poster img {
        height: 48px;
        margin-left: -24px;
        margin-top: -24px;
        opacity: 0.8;
        width: 48px;
    }

    .demo-gallery.dark>ul>li a {
        border: 3px solid #04070a;
    }

    .home .demo-gallery {
        padding-bottom: 80px;
    }
</style>

Create a container where you want to render gallery

<div class="demo-gallery">
    <ul id="lightgallery" class="list-unstyled row">
        <li class="col-xs-6 col-sm-4 col-md-3"
            data-responsive="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1-375.jpg 375, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1-480.jpg 480, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1.jpg 800"
            data-src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/1-1600.jpg"
            data-sub-html="<h4>Fading Light</h4><p>Classic view from Rigwood Jetty on Coniston Water an old archive shot similar to an old post but a little later on.</p>">
            <a href="">
                <img class="img-responsive"
                    src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/thumb-1.jpg">
            </a>
        </li>
        <li class="col-xs-6 col-sm-4 col-md-3"
            data-responsive="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2-375.jpg 375, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2-480.jpg 480, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2.jpg 800"
            data-src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/2-1600.jpg"
            data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
            <a href="">
                <img class="img-responsive"
                    src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/thumb-2.jpg">
            </a>
        </li>
        <li class="col-xs-6 col-sm-4 col-md-3"
            data-responsive="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13-375.jpg 375, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13-480.jpg 480, http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13.jpg 800"
            data-src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/13-1600.jpg"
            data-sub-html="<h4>Bowness Bay</h4><p>A beautiful Sunrise this morning taken En-route to Keswick not one as planned but I'm extremely happy I was passing the right place at the right time....</p>">
            <a href="">
                <img class="img-responsive"
                    src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/img/thumb-13.jpg">
            </a>
        </li>

    </ul>
</div>

Load jQuery library together with the jQuery Gallery LightBox library into your code

<script src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/js/picturefill.min.js"></script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/js/lightgallery-all.min.js">
</script>
<script src="http://onlinefreetools.net/wp-content/uploads/demo/gallery/lightgallery/js/jquery.mousewheel.min.js">
</script>
<script type="text/javascript">
    $(function () {
        $('#lightgallery').lightGallery();
    });
</script>