> For the complete documentation index, see [llms.txt](https://hencework.gitbook.io/pangong/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hencework.gitbook.io/pangong/pages/gallery.md).

# Gallery

## Introduction

Gallery component uses the bootstrap grid structure.

## How to Setup <a href="#how-to-setup" id="how-to-setup"></a>

### **HTML Stucture** <a href="#html-stucture" id="html-stucture"></a>

```markup
<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](http://sachinchoolur.github.io/lightGallery/) third party plugin.

### CSS

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

### JS

```markup
<!-- 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

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

## &#x20;