Lightbox
Image Lightbox
Glightbox - Image Lightbox, requires glightbox.min.css file to be loaded in <head> tag, glightbox.min.js file to be loaded, at the bottom of your template, before the closing </body> tag and to initialize the lightbox, the init-script is included in the code tab of each lightbox example from below.
Lightbox with Description
<a href="../assets/images/ph.jpg" class="glightbox-description" data-glightbox="title: Image Title; description: Lightbox image description">
<img src="../assets/images/ph.jpg" alt="">
</a><!-- / glightbox-description -->
<!-- / init-lightbox -->
<script>
var lightboxDescription = GLightbox({
selector: '.glightbox-description'
});
</script>
Video Lightbox
<a href="https://kingstudio.ro/uploads/video-embed/seychelles.mp4" class="glightbox-video">
<div class="lightbox-video-wrap">
<div class="img-holder bg-black">
<div class="middle-icon">
<i class="bi bi-play-circle"></i>
</div><!-- / middle -->
<img src="../assets/images/ph.jpg" alt="">
</div><!-- / img-holder -->
</div><!-- / lightbox-video-wrap -->
</a><!-- / glightbox-video -->
<!-- / init-lightbox -->
<script>
var lightboxVideo = GLightbox({
selector: '.glightbox-video'
});
</script>
Image Gallery
<div class="row">
<div class="col-md-4 tablet-top-30">
<a href="../assets/images/ph.jpg" class="glightbox-gallery">
<img src="../assets/images/ph.jpg" alt="">
</a><!-- / glightbox-gallery -->
</div><!-- / column -->
<div class="col-md-4 tablet-top-30">
<a href="../assets/images/ph.jpg" class="glightbox-gallery">
<img src="../assets/images/ph.jpg" alt="">
</a><!-- / glightbox-gallery -->
</div><!-- / column -->
<div class="col-md-4">
<a href="../assets/images/ph.jpg" class="glightbox-gallery">
<img src="../assets/images/ph.jpg" alt="">
</a><!-- / glightbox-gallery -->
</div><!-- / column -->
</div><!-- / row -->
<!-- / init-lightbox -->
<script>
var lightboxGallery = GLightbox({
selector: '.glightbox-gallery'
});
</script>
Project Lightbox
<div class="project">
<figure class="portfolio-item">
<div class="hovereffect">
<img class="img-responsive" src="../assets/images/ph.jpg" alt="">
<div class="overlay">
<div class="hovereffect-title project-icons">
<a href="../assets/images/ph.jpg" class="glightbox-projects" data-glightbox="title: Project One; description: Mauris ultricies nisi ut dui interdum, ut vehicula felis molestie. Vestibulum ornare ante enim, vel elementum ex venenatis vitae. Sed eu auctor est, eget venenatis nibh interdum..."><i class="bi-search"></i></a>
</div><!-- / project-icons -->
</div><!-- / overlay -->
</div><!-- / hovereffect -->
</figure><!-- / portfolio-item -->
</div><!-- / project -->
<!-- / init-lightbox -->
<script>
var lightboxGallery = GLightbox({
selector: '.glightbox-projects'
});
</script>