Buy now
Gallery
JavaScript based lightbox component for presenting various types of media.
Createx component
Gallery component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document:
assets/vendor/lightgallery/css/lightgallery-bundle.min.css and assets/vendor/lightgallery/lightgallery.min.js.
If you need extra features like zooming, fullscreen view or video you need to include additional plugins:
- assets/vendor/lightgallery/plugins/fullscreen/lg-fullscreen.min.js
- assets/vendor/lightgallery/plugins/zoom/lg-zoom.min.js
- assets/vendor/lightgallery/plugins/video/lg-video.min.js
- assets/vendor/lightgallery/plugins/thumbnail/lg-thumbnail.min.js
Use this page as a reference.
Media: Image
<!-- Image gallery -->
<div class="gallery">
<a class="gallery-item rounded" href="path-to-large-image" data-sub-html="<h6 class='text-light'>Gallery image caption</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-caption">Gallery image caption</span>
</a>
</div>Media: Video
<!-- Video gallery -->
<div class="gallery" data-video="true">
<a class="gallery-item video-item rounded" href="path-to-youtube-video" data-sub-html="<h6 class='text-light'>Gallery video caption</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-caption">Gallery video caption</span>
</a>
</div>Media: Iframe (Google map)
<!-- Media: Iframe (Google map) -->
<div class="gallery">
<a class="gallery-item rounded" href="link-to-google-map-embed" data-iframe="true" data-sub-html="<h6 class='text-light'>Google map embed</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-caption">Google map embed</span>
</a>
</div>Grid with gutters
<!-- Grid with gutters -->
<div class="row gallery" data-video="true">
<!-- Item -->
<div class="col-xl-4 col-sm-6 mb-grid-gutter">
<a class="gallery-item rounded" href="path-to-large-image" data-sub-html="<h6 class='text-light'>Gallery image caption<</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-caption">Gallery image caption</span>
</a>
</div>
<!-- Item -->
<div class="col-xl-4 col-sm-6 mb-grid-gutter">
...
</div>
<!-- Add as many columns with gallery item inside as you need -->
</div>Grid no gutters
<!-- Grid no gutters -->
<div class="row gallery g-0" data-video="true">
<!-- Item -->
<div class="col-xl-4 col-sm-6">
<a class="gallery-item" href="path-to-large-image" data-sub-html="<h6 class='text-light'>Gallery image caption<</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-caption">Gallery image caption</span>
</a>
</div>
<!-- Item -->
<div class="col-xl-4 col-sm-6">
...
</div>
<!-- Add as many columns with gallery item inside as you need -->
</div>Inside card
Card with gallery thumbnail
Some quick example text to build on the card title and make up the bulk of the card's content.
Go somewhere<!-- Inside card -->
<div class="card gallery">
<a class="gallery-item card-img-top" href="path-to-large-image" data-sub-html="<h6 class='text-light'>Gallery image caption</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
<div class="card-body">
<h5>Card with gallery thumbnail</h5>
<p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
</div>
</div>Inside carousel
<!-- Gallery inside carousel -->
<div class="tns-carousel-wrapper tns-controls-outside gallery" data-video="true">
<div class="tns-carousel-inner" data-carousel-options="{
"nav": false,
"responsive": {
"0":{"items":1},
"576":{
"items":2,
"gutter": 20},
"1200":{
"items":3,
"gutter": 30
}
}
}">
<!-- Item -->
<div>
<a class="gallery-item rounded" href="path-to-large-image" data-sub-html="<h6 class='text-light'>Gallery image caption</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-caption">Gallery image caption</span>
</a>
</div>
<!-- Add as many gallery items as you need -->
</div>
</div>