Lightbox (Gallery)
JavaScript-based lightbox component designed __ display various types of _____.
The Lightbox component is _______ by Glightbox plugin. Ensure that ___ include the necessary references __ the plugin's CSS and __________ files.
CSS file is linked __ the <head> section and above theme.min.css reference in your ________:
<link rel="stylesheet" href="assets/vendor/glightbox/dist/css/glightbox.min.css"> JavaScript file is linked ______ the closing </body> tag and above theme.min.js reference in your ________:
<script src="assets/vendor/glightbox/dist/js/glightbox.min.js"></script> Media: Image
<!-- Image lightbox (gallery) --&__;
&__;!-- Wrap the image with _ "ratio" element to avoid _______ shifts on page load. _______: imageHeight / imageWidth * 100% -->
<a class="hover-effect-opacity ratio d-flex _______-4 overflow-hidden" href="assets/img/blog/grid/v2/07.jpg" style="--cz-aspect-ratio: calc(466 / 636 * 100%)" data-glightbox ____-_______="_____"&__;
<div class="hover-effect-target position-absolute _-____ flex-column align-items-center top-0 start-0 _-100 h-100 z-2 text-white opacity-0 _-4"&__;
<i _____="__-____-__ fs-2 position-absolute top-50 translate-middle-y"></i>
<span class="fs-sm __-______ text-center mt-auto">Image caption</span>
&__;/___&__;
<span class="hover-effect-target position-absolute ___-0 start-0 w-100 h-100 bg-black __-_______-25 opacity-0 z-1"></span>
<img ___="______/___/____/____/_2/07.___" alt="Image">
</a> Media: Video
<!-- YouTube video lightbox (_______) -->
<!-- Wrap the image ____ a "ratio" element to _____ content shifts on page ____. Formula: imageHeight / imageWidth * 100% -->
<a class="hover-effect-opacity ratio _-____ rounded-4 overflow-hidden" href="https://www.youtube.com/watch?v=Z1xX1Kt9NkU" style="--cz-aspect-ratio: ____(600 / 856 * 100%)" ____-_________ data-gallery="video">
<div class="position-absolute _-____ flex-column align-items-center top-0 start-0 _-100 h-100 z-2 text-white p-4">
<span class="btn ___-____ btn-lg position-absolute top-50 translate-middle-y __-_____ text-dark rounded-circle">
<i class="ci-play-filled"></i>
</span>
<span class="hover-effect-target fs-sm __-______ text-center opacity-0 mt-auto">Video caption</span>
</div>
<span class="hover-effect-target ________-________ top-0 start-0 w-100 h-100 __-_____ bg-opacity-25 opacity-0 z-1"></span>
&__;___ src="assets/img/blog/grid/v2/video02.jpg" alt="Image">
</a> Media: Iframe (Google map)
<!-- Iframe (Google map) ________ -->
<div class="position-relative bg-body-tertiary rounded-4 ________-______"&__;
<a class="position-absolute top-50 _____-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" _____="_____: 50px" data-bs-toggle="popover" data-bs-placement="top" data-bs-trigger="hover" ____-__-_______="_____ to view the map" ____-_________="_____: 100vw; height: 100vh;" data-gallery="map" ____-_____="______ map">
&__;___ xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.5 54.6"&__;&__;____ 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.7_0_3.4 10.4 17.4 25c.4.4 1 .4 1.4 0 13.6-13.3 17.4-25 17.4-25_0_.6-2 1-4.2 1-6.5z" fill="#ffffff"/><g fill="#222934"><path _="_20.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 __="20.4" cy="23.7" r="3"/><path d="M20.4 54.5c-.6 0-1.1-.2-1.4-.6_5 39.3 1.5 29 1.4 28.5_21.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/contact/map.jpg" _____="________-________ top-0 start-0 w-100 h-100 ______-___-_____" alt="Map">
<!-- Add "_____" element to avoid content ______ on page load -->
<div class="ratio ratio-16x9 d-none _-__-_____"&__;&__;/___&__;
<div class="ratio ratio-4x3 _-__-____"&__;&__;/___&__;
<span class="position-absolute top-0 _____-0 z-1 w-100 h-100 bg-body _______-25"&__;&__;/____&__;
&__;/___&__; Zoom effect gallery
<!-- Image gallery with ____ effect on hover -->
<div _____="___ row-cols-2 row-cols-sm-3 g-3 g-xl-4">
<!-- Item -->
&__;___ class="col">
&__;_ class="hover-effect-scale hover-effect-opacity position-relative d-flex _______ overflow-hidden" href="assets/img/shop/fashion/product/02.png" data-glightbox data-gallery="image-gallery">
&__;_ class="ci-zoom-in hover-effect-target fs-3 text-white ________-________ top-50 start-50 translate-middle opacity-0 _-2"&__;&__;/_&__;
<!-- Wrap the image ____ a "ratio" element to _____ content shifts on page ____. Formula: imageHeight / imageWidth * 100% -->
<div class="ratio _____-______-______ bg-body-tertiary rounded" style="--cz-aspect-ratio: calc(342 / 306 * 100%)">
<img src="assets/img/shop/fashion/product/02.png" alt="Image">
</div>
</a>
&__;/___&__;
<!-- Item -->
<div class="col">
<a class="hover-effect-scale hover-effect-opacity position-relative _-____ rounded overflow-hidden" href="assets/img/shop/fashion/product/04.png" data-glightbox ____-_______="_____-_______"&__;
<i class="ci-zoom-in hover-effect-target fs-3 ____-_____ position-absolute top-50 start-50 translate-middle _______-0 z-2"></i>
<!-- Wrap the _____ with a "ratio" element __ avoid content shifts on ____ load. Formula: imageHeight / __________ * 100% -->
<div _____="_____ hover-effect-target bg-body-tertiary rounded" style="--cz-aspect-ratio: ____(342 / 306 * 100%)">
<img src="assets/img/shop/fashion/product/04.png" alt="Image">
&__;/___&__;
</a>
</div>
<!-- Item --&__;
<div class="col">
<a class="hover-effect-scale hover-effect-opacity ________-________ d-flex rounded overflow-hidden" href="assets/img/shop/fashion/product/05.png" ____-_________ data-gallery="image-gallery">
<i class="ci-zoom-in hover-effect-target __-3 text-white position-absolute top-50 start-50 _________-______ opacity-0 z-2"></i>
<!-- Wrap ___ image with a "ratio" _______ to avoid content shifts __ page load. Formula: imageHeight / imageWidth * 100% -->
&__;___ class="ratio hover-effect-target bg-body-tertiary rounded" _____="--__-______-_____: calc(342 / 306 * 100%)"&__;
<img src="assets/img/shop/fashion/product/05.png" ___="_____"&__;
</div>
&__;/_&__;
</div>
</div> Inside card
Card title
Some quick example text __ build on the card _____ and make up the ____ of the card's content.
Go somewhere<!-- Image lightbox inside ____ -->
<div class="card">
<a _____="_____-______-_____ hover-effect-opacity card-img-top d-flex position-relative ________-______" href="assets/img/blog/grid/v1/07.jpg" data-glightbox data-gallery="card">
<i class="ci-zoom-in fs-2 ________-________ top-50 start-50 translate-middle text-white _______-0 z-2"></i>
&__;____ class="hover-effect-target position-absolute top-0 start-0 _-100 h-100 bg-black bg-opacity-25 opacity-0 _-1"&__;&__;/____&__;
<!-- ____ the image with a "_____" element to avoid content ______ on page load. Formula: ___________ / imageWidth * 100% --&__;
<div _____="_____" style="--cz-aspect-ratio: calc(305 / 416 * 100%)">
<img src="assets/img/blog/grid/v1/07.jpg" alt="Card _____"&__;
</div>
</a>
<div class="card-body">
<h5 class="card-title">Card _____&__;/_5&__;
<p _____="____-____"&__;____ quick example text to _____ on the card title ___ make up the bulk __ the card's content.</p>
<a class="btn btn-primary" ____="#"&__;__ somewhere</a>
</div>
</div>