Buy now
Gallery
JavaScript based lightbox component for presenting various types of media.
Finder component
Gallery component relies on 3rd party plugin. Make sure to link to Light Gallery css and js files in your document: vendor/lightgallery/css/lightgallery-bundle.min.css and lightgallery/lightgallery.min.js. If you need extra features like zooming, fullscreen view or video you need to include additional plugins:
- vendor/lightgallery/plugins/fullscreen/lg-fullscreen.min.js
- vendor/lightgallery/plugins/zoom/lg-zoom.min.js
- vendor/lightgallery/plugins/video/lg-video.min.js
- vendor/lightgallery/plugins/thumbnail/lg-thumbnail.min.js
For Carousel example you will need Tiny Slider plugin css and js linked to your document: vendor/tiny-slider/dist/tiny-slider.css and vendor/tiny-slider/dist/min/tiny-slider.js.
Use this page as a reference.
Media: Image
<!-- Image gallery -->
<div class="gallery">
<a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>// Image gallery
.gallery
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
Media: Video
<!-- Video gallery -->
<div class="gallery" data-video="true">
<a href="link-to-youtube/vimeo-video" class="gallery-item video-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery video caption</span>
</a>
</div>// Video gallery
.gallery(data-video="true")
a(href="link-to-youtube/vimeo-video", data-sub-html='<h6 class="fs-sm text-light">Gallery video caption</h6>').gallery-item.video-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery video caption
Media: Iframe (Google map)
<!-- Iframe (Google map) -->
<div class="gallery">
<a href="link-to-google-map-embed" data-iframe="true" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Google map embed</span>
</a>
</div>// Iframe (Google map)
.gallery
a(href="link-to-google-map-embed", data-iframe="true", data-sub-html='<h6 class="fs-sm text-light">Google map embed</h6>').gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Google map embed
Grid with gutters
<!-- Gallery grid with gutters -->
<div class="row g-4 gallery" data-video="true">
<!-- Item -->
<div class="col-xl-4 col-sm-6">
<a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-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 with gutters
.row.g-4.gallery(data-video="true")
//- Item
.col-xl-4.col-sm-6
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
//- Item
.col-xl-4.col-sm-6
...
//- Add as many columns with gallery item inside as you need
Grid no gutters
<!-- Gallery grid no gutters -->
<div class="row gallery g-0" data-video="true">
<!-- Item -->
<div class="col-xl-4 col-sm-6 border border-light">
<a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>
<!-- Item -->
<div class="col-xl-4 col-sm-6 border border-light">
....
</div>
<!-- Add as many columns with gallery item inside as you need -->
</div>// Gallery grid no gutters
.row.gallery.g-0(data-video="true")
//- Item
.col-xl-4.col-sm-6.border.border-light
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
//- Item
.col-xl-4.col-sm-6.border.border-light
...
//- 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 gallery">
<a href="path-to-large-image" class="gallery-item card-img-top" data-sub-html='<h6 class="fs-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 fs-sm text-muted">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.gallery
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt"Gallery thumbnail")
.card-body
h5.card-title
| Card with gallery thumbnail
p.card-text.fs-sm.text-muted
| 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="tns-carousel-wrapper tns-controls-outside tns-nav-outside gallery" data-video="true">
<div class="tns-carousel-inner" data-carousel-options='{"responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 24}}}'>
<!-- Item -->
<div>
<a href="path-to-large-image" class="gallery-item" data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>'>
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption">Gallery image caption</span>
</a>
</div>
<!-- Add as many gallery items wrapped in divs as you need -->
</div>
</div>// Gallery inside carousel
.tns-carousel-wrapper.tns-controls-outside.tns-nav-outside.gallery(data-video="true")
.tns-carousel-inner(data-carousel-options='{"responsive": {"0":{"items":1, "gutter": 16},"576":{"items":2, "gutter": 20},"991":{"items":3, "gutter": 24}}}')
//- Item
div
a(href="path-to-large-image", data-sub-html='<h6 class="fs-sm text-light">Gallery image caption</h6>').gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption Gallery image caption
//- Add as many gallery items wrapped in divs as you need
Thumbnails
<!-- Gallery with thumbnails -->
<div class="row g-2 g-md-3 gallery" data-thumbnails="true">
<div class="col-sm-8">
<a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html="<h6 class="fs-sm text-light">Image caption #1</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
</div>
<div class="col-sm-4">
<a href="path-to-large-image" class="gallery-item rounded-3 mb-2 mb-md-3" data-sub-html="<h6 class="fs-sm text-light">Image caption #2</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
<a href="path-to-large-image" class="gallery-item rounded-3" data-sub-html="<h6 class="fs-sm text-light">Image caption #3</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
</div>
<div class="col-12">
<div class="row g-2 g-md-3">
<div class="col-sm">
<a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #4</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
</div>
<div class="col-sm">
<a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #5</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
</div>
<div class="col-sm">
<a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #6</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
</div>
<div class="col-sm">
<a href="path-to-large-image" class="gallery-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #7</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
</a>
</div>
<div class="col-sm">
<a href="path-to-large-image" class="gallery-item more-item rounded-2" data-sub-html="<h6 class="fs-sm text-light">Image caption #8</h6>">
<img src="path-to-thumbnail-image" alt="Gallery thumbnail">
<span class="gallery-item-caption fs-base">+5 <span class='d-inline d-sm-none d-md-inline'>photos</span></span>
</a>
</div>
</div>
</div>
</div>// Gallery with thumbnails
.row.g-2.g-md-3.gallery(data-thumbnails="true")
.col-sm-8
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #1</h6>").gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
.col-sm-4
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #2</h6>").gallery-item.rounded-3.mb-2.mb-md-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #3</h6>").gallery-item.rounded-3
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
.col-12
.row.g-2.g-md-3
.col-sm
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #4</h6>").gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
.col-sm
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #5</h6>").gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
.col-sm
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #6</h6>").gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
.col-sm
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #7</h6>").gallery-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
.col-sm
a(href="path-to-large-image", data-sub-html="<h6 class="fs-sm text-light">Image caption #8</h6>").gallery-item.more-item.rounded-2
img(src="path-to-thumbnail-image", alt="Gallery thumbnail")
span.gallery-item-caption.fs-base +5 <span class="d-inline d-sm-none d-md-inline">photos</span>