Gallery Light Box

Gallery Light Box

Gallery lightbox view

See Demo Download Light Gallery Files

Code

put this code inside <head> tag

<link href="lightbox/dist/css/lightgallery.css" rel="stylesheet"></link>

HTML

Use this code where you want to display light gallery

<div>

<ul id="lightgallery" class="list-unstyled row">

<li class="col-xs-6 col-sm-4 col-md-3" data-src="https://picsum.photos/id/494/1500/600">

<a href="">

<img class="img-responsive" src="https://picsum.photos/id/494/200/200">

</a>

</li>

<li class="col-xs-6 col-sm-4 col-md-3" data-src="https://picsum.photos/id/495/1500/600">

<a href="">

<img class="img-responsive" src="https://picsum.photos/id/495/200/200">

</a>

</li>

<li class="col-xs-6 col-sm-4 col-md-3" data-src="https://picsum.photos/id/496/1500/600">

<a href="">

<img class="img-responsive" src="https://picsum.photos/id/496/200/200">

</a>

</li>

<li class="col-xs-6 col-sm-4 col-md-3" data-src="https://picsum.photos/id/497/1500/600">

<a href="">

<img class="img-responsive" src="https://picsum.photos/id/497/200/200">

</a>

</li>

<li class="col-xs-6 col-sm-4 col-md-3" data-src="https://picsum.photos/id/498/1500/600">

<a href="">

<img class="img-responsive" src="https://picsum.photos/id/498/200/200">

</a>

</li>

</ul>

</div>

Put code before body close

<script src="lightbox/jquery-3.1.0.min.js"></script>

<script src="lightbox/jquery-1.12.2.js"></script>

<script src="lightbox/bootstrap/js/bootstrap.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$('#lightgallery').lightGallery();

});

</script>

<script src="https://cdn.jsdelivr.net/picturefill/2.3.1/picturefill.min.js"></script>

<script src="lightbox/dist/js/lightgallery.js"></script>

<script src="lightbox/dist/js/lg-fullscreen.js"></script>

<script src="lightbox/dist/js/lg-thumbnail.js"></script>

<script src="lightbox/dist/js/lg-video.js"></script>

<script src="lightbox/dist/js/lg-autoplay.js"></script>

<script src="lightbox/dist/js/lg-zoom.js"></script>

<script src="lightbox/dist/js/lg-hash.js"></script>

<script src="lightbox/dist/js/lg-pager.js"></script>

<script src="lightbox/lib/jquery.mousewheel.min.js"></script>

Comments