Lightbox

Display images and galleries in an overlay viewer.

Single Image Lightbox

    
    
    <div class="flex gap-4"> 
        <a href="assets/img/avatar/avatar-10.jpg" class="image-popup">
            <img src="assets/img/avatar/avatar-10.jpg" alt="image" class="h-full">
        </a>
        <a href="assets/img/avatar/avatar-11.jpg" class="image-popup">
            <img src="assets/img/avatar/avatar-11.jpg" alt="image" class="h-full">
        </a>
        <a href="assets/img/avatar/avatar-12.jpg" class="image-popup">
            <img src="assets/img/avatar/avatar-12.jpg" alt="image" class="h-full">
        </a>
    </div>

Image with Description

    
    
    <div class="flex gap-4"> 
        <a href="assets/img/avatar/avatar-13.jpg" class="image-popup-desc" data-title="Title 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
            <img src="assets/img/avatar/avatar-13.jpg" class="img-fluid" alt="work-thumbnail">
        </a>
        <a href="assets/img/avatar/avatar-14.jpg" class="image-popup-desc" data-title="Title 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
            <img src="assets/img/avatar/avatar-14.jpg" class="img-fluid" alt="work-thumbnail">
        </a>
        <a href="assets/img/avatar/avatar-15.jpg" class="image-popup-desc" data-title="Title 01" data-description="Lorem ipsum dolor sit amet, consectetuer adipiscing elit">
            <img src="assets/img/avatar/avatar-15.jpg" class="img-fluid" alt="work-thumbnail">
        </a>
    </div>