<div id="modal" class="modal modal-static modal-lightbox">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body"></div>
        </div>
        <div class="modal-navbox">
            <div class="btn-close"><i class='bx bx-x'></i></div>
            <div class="btn-next"><i class='bx bxs-chevron-right'></i></div>
            <div class="btn-prev"><i class='bx bxs-chevron-left'></i></div>
        </div>
    </div>
</div>

$('a[rel=image]').on('click', function(e) {
    e.preventDefault();
    $('#modal').lightbox({   
        media: $(this), 
        scrolling: true,
        interval: 5000,
        animate: 'fadeInUp'            
    });
});

$('a[rel=iframe]').on('click', function(e) {
    e.preventDefault();
    $('#modal').lightbox({      
        media: $(this),
        navbox : false,
        animate: 'fadeInUp',
        sizing: 'modal-w-50 modal-h-75'          
    });
});