Buy now
Gallery
JavaScript based lightbox component for presenting various types of media.
Finder component
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>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>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>'>
<agm-map [latitude]="latitude" [longitude]="longitude" style="height: 300px"></agm-map>
</a>
</div>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>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>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>Inside carousel
<!-- Gallery inside carousel -->
<ngb-carousel [showNavigationArrows]="showNavigationArrows" [showNavigationIndicators]="showNavigationIndicators">
<ng-template ngbSlide>
<!-- 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 -->
</ng-template>
</ngb-carousel>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>