Gallery (Lightbox)
JavaScript based lightbox component for presenting various types of media.
Around component
The Gallery component is dependent on a 3rd-party plugin. Please ensure that you include the Light Gallery CSS and JavaScript files in your document. You can find these files at the following locations:
- CSS file: assets/vendor/lightgallery/css/lightgallery-bundle.min.css
- JavaScript file: assets/vendor/lightgallery/lightgallery.min.js
If you require additional features such as zooming, fullscreen view, or video functionality, you will need to incorporate the corresponding extra plugins:
- Fullscreen plugin: assets/vendor/lightgallery/plugins/fullscreen/lg-fullscreen.min.js
- Zoom plugin: assets/vendor/lightgallery/plugins/zoom/lg-zoom.min.js
- Video plugin: assets/vendor/lightgallery/plugins/video/lg-video.min.js
- Thumbnail plugin: assets/vendor/lightgallery/plugins/thumbnail/lg-thumbnail.min.js
For guidance and examples, please refer to this page as a reference.
Media: Image
<!-- Image gallery -->
<div class="gallery">
<a href="assets/img/portfolio/single/v1/04.jpg" class="gallery-item d-block card-hover">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Image caption
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/portfolio/single/v1/04.jpg" class="d-block rounded-4" alt="Image caption">
</a>
</div>Media: Video
<!-- Video gallery -->
<div class="gallery" data-video="true">
<a href="https://www.youtube.com/watch?v=udMULpKcnn8" class="gallery-item d-block card-hover">
<div class="btn btn-icon btn-lg btn-primary rounded-circle pe-none position-absolute top-50 start-50 translate-middle z-3">
<i class="ai-play-filled"></i>
</div>
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Video caption
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/landing/product/video-cover.jpg" class="d-block rounded-4" alt="Video caption">
</a>
</div>Media: Iframe (Google map)
<!-- Iframe (Google map) -->
<div class="gallery">
<a href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d193595.91476818218!2d-74.11976253858133!3d40.69740344296443!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew%20York%2C%20NY%2C%20USA!5e0!3m2!1sen!2sua!4v1568574342685!5m2!1sen!2sua" class="gallery-item d-block card-hover" data-iframe="true">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Google map embed
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/map.jpg" class="d-block rounded-4" alt="Google map embed">
</a>
</div>Zoom effect
<!-- Image gallery with zooming hover effect -->
<div class="gallery">
<a href="assets/img/portfolio/single/v1/04.jpg" class="gallery-item d-block card-hover zoom-effect">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Image caption
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<div class="zoom-effect-wrapper rounded-4">
<img src="assets/img/portfolio/single/v1/04.jpg" class="zoom-effect-img" alt="Image caption">
</div>
</a>
</div>Thumbnails
<!-- Gallery grid with enabled thumbnails -->
<div class="gallery row row-cols-1 row-cols-sm-2 row-cols-md-3 g-4" data-thumbnails="true">
<!-- Item -->
<div class="col">
<a href="assets/img/landing/corporate/features/01.jpg" class="gallery-item d-block card-hover">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Image #1
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/landing/corporate/features/01.jpg" class="d-block rounded-4" alt="Image #1">
</a>
</div>
<!-- Item -->
<div class="col">
<a href="assets/img/landing/corporate/features/02.jpg" class="gallery-item d-block card-hover">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Image #2
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/landing/corporate/features/02.jpg" class="d-block rounded-4" alt="Image #2">
</a>
</div>
<!-- Item -->
<div class="col">
<a href="assets/img/landing/corporate/features/03.jpg" class="gallery-item d-block card-hover">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute bottom-0 start-0 w-100 text-center text-white fs-sm fw-medium z-2 pb-3">
Image #3
</div>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/landing/corporate/features/03.jpg" class="d-block rounded-4" alt="Image #3s">
</a>
</div>
</div>Inside card
Card title
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 overflow-hidden rounded-5">
<a href="assets/img/landing/web-studio/industries/03.jpg" class="gallery-item d-block card-hover">
<div class="d-flex justify-content-center align-items-center position-absolute top-0 start-0 w-100 h-100 rounded-4 overflow-hidden z-2 opacity-0">
<i class="ai-zoom-in fs-2 text-white position-relative z-2"></i>
<div class="position-absolute top-0 start-0 w-100 h-100 bg-dark opacity-40"></div>
</div>
<img src="assets/img/landing/web-studio/industries/03.jpg" class="card-img-top" alt="Card image">
</a>
<div class="card-body">
<h4 class="card-title">Card title</h4>
<p class="card-text">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-primary">Go somewhere</a>
</div>
</div>