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