Photo Gallery - jQuery lightgallery

LightGallery is a customizable, modular, responsive, lightbox gallery plugin for jQuery.

Page Demo Plugin Website

Make sure to include all the required source files as mentioned at the end of this page in order to get most of the photo gallery.

Photo gallery item requires 2 source input image files for both preview and thumbnail. <a> requires the file path of the main preview image and the <img> requires the path file of thumbnail.

e.g:

<a href="demo/img/gallery/1.jpg" class="col-md-2 col-4">
    <div class="lightbox__item photos__item">
        <img src="demo/img/gallery/thumbs/1.jpg" alt="" />
    </div>
</a>

<div class="row lightbox photos">

    <a href="..." class="col-md-2 col-4">
        <div class="lightbox__item photos__item">
            <img src="....jpg" alt="" />
        </div>
    </a>

    <a href="..." class="col-md-2 col-4">
        <div class="lightbox__item photos__item">
            <img src="..." alt="" />
        </div>
    </a>

    <a href="..." class="col-md-2 col-4">
        <div class="lightbox__item photos__item">
            <img src="..." alt="" />
        </div>
    </a>
</div>
// Please note that this function is already included in js/app.min.js(from js/inc/functions/vendors.js) thus you don't need to add this again.

if ($('.lightbox')[0]) {
    $('.lightbox').lightGallery({
        enableTouch: true
    });
}

Requirements:

  • /scss/inc/vendor-overrides/_lightgallery.scss
  • /scss/inc/photos.scss
  • /vendors/lightgallery/css/lightgallery.min.css
  • /vendors/lightgallery/js/lightgallery-all.min.js