Gallery

Introduction

Gallery component uses the bootstrap grid structure.

How to Setup

HTML Stucture

<div class="row hk-gallery">
<div class="col-lg-2 col-md-4 col-sm-4 col-6 mb-10" data-src="dist/img/gallery/mock1.jpg">
<a href="#" class="">
<div class="gallery-img" style="background-image:url('dist/img/gallery/mock1.jpg');"></div>
</a>
</div>
....
....
<div class="col-lg-2 col-md-4 col-sm-4 col-6 mb-10" data-src="dist/img/gallery/mock1.jpg">
<a href="#" class="">
<div class="gallery-img" style="background-image:url('dist/img/gallery/mock1.jpg');"></div>
</a>
</div>
</div>

Dependency

For image and video light box we used lightGallery third party plugin.

CSS

<!-- Lightgallery CSS -->
<link href="vendors/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">

JS

<!-- Gallery JavaScript -->
<script src="vendors/lightgallery/dist/js/lightgallery-all.min.js"></script>
<script src="dist/js/froogaloop2.min.js"></script>
<script src="dist/js/gallery-data.js"></script>

Initialize lightGallery js

/***** LightGallery init start*****/
$('.hk-gallery').lightGallery({ showThumbByDefault: false,hash: false});
/***** LightGallery init end*****/