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