Lightbox gallery - lightgallery

0 votes
1,463 views
added Mar 27, 2019 in Plugins by LC Marshal Captain (25,790 points)

Installation

// With bower
$ bower install lightgallery --save

// With NPM
npm install lightgallery

// Install the full list dependencies of lightgallery
$ bower/npm install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share

// Or CDN
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.12/css/lightgallery.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-thumbnail/1.1.0/lg-thumbnail.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lg-fullscreen/1.1.0/lg-fullscreen.min.js"></script>

 

Usage

$(document).ready(function() {
    $("#lightgallery").lightGallery({
      download: false,
    }); 
});

 

Usage on gallery

<div id="lightgallery">
<a class="col-md-4" href="<?php echo $bmpa_g_img . '1.JPG'; ?>" title="title here">
  <img class="g-img" src="<?php echo $bmpa_g_thumb . '1.JPG'; ?>" />
</a>
<a class="col-md-4" href="<?php echo $bmpa_g_img . '2.JPG'; ?>" title="title here 2">
  <img class="g-img" src="<?php echo $bmpa_g_thumb . '2.JPG'; ?>" />
</a>
</div>

 

Learn more about API, options  docs at http://sachinchoolur.github.io

1 Response

0 votes
responded Apr 20, 2019 by LC Marshal Captain (25,790 points)

For self-host video, head on here

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...