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*****/