Lightbox (Gallery)
JavaScript-based lightbox component designed to display various types of media.
The Lightbox component is powerde by Glightbox plugin. Ensure that you include the necessary references to the plugin's CSS and JavaScript files.
CSS file is linked in the <head> section and above theme.min.css reference in your document:
<link rel="stylesheet" href="assets/vendor/glightbox/dist/css/glightbox.min.css">JavaScript file is linked before the closing </body> tag and above theme.min.js reference in your document:
<script src="assets/vendor/glightbox/dist/js/glightbox.min.js"></script>Media: Image
<!-- Image lightbox (gallery) -->
<!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
<a class="hover-effect-opacity ratio d-flex bg-body-tertiary rounded-4 overflow-hidden" href="assets/img/listings/city-guide/single/02.jpg" style="--fn-aspect-ratio: calc(333 / 480 * 100%)" data-glightbox data-gallery="image">
<div class="hover-effect-target position-absolute d-flex flex-column align-items-center top-0 start-0 w-100 h-100 z-2 text-white opacity-0 p-4">
<i class="fi-zoom-in fs-2 position-absolute top-50 translate-middle-y"></i>
<span class="fs-sm fw-medium text-center mt-auto">Image caption</span>
</div>
<span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<img src="assets/img/listings/city-guide/single/02.jpg" alt="Image">
</a>Media: Video
<!-- YouTube video lightbox (gallery) -->
<!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
<a class="hover-effect-opacity ratio d-flex bg-body-tertiary rounded-4 overflow-hidden" href="https://www.youtube.com/watch?v=Z1xX1Kt9NkU" style="--fn-aspect-ratio: calc(346 / 480 * 100%)" data-glightbox data-gallery="video">
<div class="position-absolute d-flex flex-column align-items-center top-0 start-0 w-100 h-100 z-2 text-white p-4">
<span class="btn btn-icon btn-lg position-absolute top-50 translate-middle-y bg-white text-dark rounded-circle">
<i class="fi-play-filled"></i>
</span>
<span class="hover-effect-target fs-sm fw-medium text-center opacity-0 mt-auto">Video caption</span>
</div>
<span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<img src="assets/img/blog/v1/02.jpg" alt="Image">
</a>Media: Iframe (Google map)
<!-- Iframe (Google map) lightbox -->
<div class="position-relative bg-body-tertiary rounded-4 overflow-hidden">
<a class="position-absolute top-50 start-50 translate-middle z-2 mt-lg-n3" href="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d30908.594922615324!2d-73.07331970206108!3d40.788157341303005!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e8483b8bffed93%3A0x53467ceb834b7397!2s396%20Lillian%20Blvd%2C%20Holbrook%2C%20NY%2011741%2C%20USA!5e0!3m2!1sen!2s!4v1706086459668!5m2!1sen!2" style="width: 50px" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" data-bs-content="Click to view the map" data-glightbox="width: 100vw; height: 100vh" data-gallery="map" aria-label="Toggle map">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.5 54.6"><path d="M42.5 19.2C42.5 8.1 33.2-.7 22 0 12.4.7 4.7 8.5 4.2 18c-.2 2.7.3 5.3 1.1 7.7h0s3.4 10.4 17.4 25c.4.4 1 .4 1.4 0 13.6-13.3 17.4-25 17.4-25h0c.6-2 1-4.2 1-6.5z" fill="#ffffff"/><g fill="#222934"><path d="M20.4 31.8c-4.5 0-8.1-3.6-8.1-8.1s3.6-8.1 8.1-8.1 8.1 3.6 8.1 8.1-3.7 8.1-8.1 8.1zm0-14.2a6.06 6.06 0 0 0-6.1 6.1 6.06 6.06 0 0 0 6.1 6.1c3.3 0 6.1-2.7 6.1-6.1s-2.8-6.1-6.1-6.1z"/><circle cx="20.4" cy="23.7" r="3"/><path d="M20.4 54.5c-.6 0-1.1-.2-1.4-.6C5 39.3 1.5 29 1.4 28.5a21.92 21.92 0 0 1-1.2-8c.6-10.1 8.6-18.3 18.7-19C24.6 1.1 30 3 34.1 6.9c4.1 3.8 6.4 9.2 6.4 14.8 0 2.4-.4 4.7-1.2 6.9-.1.5-4 12-17.6 25.3-.3.4-.8.6-1.3.6zm-17-26.2c.8 2 4.9 11.6 17 24.2 13.2-13 17-24.5 17.1-24.6.7-2 1.1-4.1 1.1-6.3 0-5-2.1-9.9-5.8-13.3-3.7-3.5-8.6-5.2-13.7-4.8-9.1.6-16.4 8-16.9 17.1-.1 2.5.2 5 1.1 7.3l.1.4z"/></g></svg>
</a>
<img src="assets/img/docs/map.jpg" class="position-absolute top-0 start-0 w-100 h-100 object-fit-cover" alt="Map">
<!-- Add "ratio" element to avoid content shifts on page load -->
<div class="ratio ratio-16x9 d-none d-sm-block"></div>
<div class="ratio ratio-4x3 d-sm-none"></div>
<span class="position-absolute top-0 start-0 z-1 w-100 h-100 bg-body opacity-25"></span>
</div>Zoom effect gallery
<!-- Image gallery with zoom effect on hover -->
<div class="row row-cols-2 row-cols-sm-3 g-3 g-xl-4">
<!-- Item -->
<div class="col">
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden" href="assets/img/listings/contractors/single/02.jpg" data-glightbox data-gallery="image-gallery">
<i class="fi-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio hover-effect-target bg-body-tertiary rounded" style="--fn-aspect-ratio: calc(318 / 306 * 100%)">
<img src="assets/img/listings/contractors/single/th02.jpg" alt="Image">
</div>
</a>
</div>
<!-- Item -->
<div class="col">
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden" href="assets/img/listings/contractors/single/03.jpg" data-glightbox data-gallery="image-gallery">
<i class="fi-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio hover-effect-target bg-body-tertiary rounded" style="--fn-aspect-ratio: calc(318 / 306 * 100%)">
<img src="assets/img/listings/contractors/single/th03.jpg" alt="Image">
</div>
</a>
</div>
<!-- Item -->
<div class="col">
<a class="hover-effect-scale hover-effect-opacity position-relative d-flex rounded overflow-hidden" href="assets/img/listings/contractors/single/04.jpg" data-glightbox data-gallery="image-gallery">
<i class="fi-zoom-in hover-effect-target fs-3 text-white position-absolute top-50 start-50 translate-middle opacity-0 z-2"></i>
<span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio hover-effect-target bg-body-tertiary rounded" style="--fn-aspect-ratio: calc(318 / 306 * 100%)">
<img src="assets/img/listings/contractors/single/th04.jpg" alt="Image">
</div>
</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<!-- Image lightbox inside card -->
<div class="card">
<a class="hover-effect-scale hover-effect-opacity card-img-top d-flex position-relative bg-body-tertiary overflow-hidden" href="assets/img/listings/city-guide/single/01.jpg" data-glightbox data-gallery="card">
<i class="fi-zoom-in fs-2 position-absolute top-50 start-50 translate-middle text-white opacity-0 z-2"></i>
<span class="hover-effect-target position-absolute top-0 start-0 w-100 h-100 bg-black bg-opacity-25 opacity-0 z-1"></span>
<!-- Wrap the image with a "ratio" element to avoid content shifts on page load. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio" style="--fn-aspect-ratio: calc(247 / 350 * 100%)">
<img src="assets/img/listings/city-guide/single/01.jpg" alt="Card image">
</div>
</a>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<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 class="btn btn-primary" href="#">Go somewhere</a>
</div>
</div>