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.

<a href="../assets/images/ph.jpg" class="glightbox-image">
    <img src="../assets/images/ph.jpg" alt="">
</a><!-- / glightbox-image -->

<!-- / init-lightbox -->
<script>
var lightboxImage = GLightbox({
    selector: '.glightbox-image'
});
</script>

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>
LAYOUTS
Default Layout
Layout Right Side-Nav
Layout Detached Left Side-Nav
Layout Detached Right Side-Nav