Make an Elementor Image Gallery with Animated Lightbox/Popup

 

 

CSS Code Snippet for 1st Container:

selector{
    position: static;
}

 

CSS Code Snippet for Parent Container:

selector .mdw-popup-image > .elementor-widget-image{
    cursor: pointer;
    transition: all 500ms ease-in-out;
    position: static;
}
selector .mdw-popup-image.active-con > .elementor-widget-image{
    position: fixed;
    z-index: 100;
}
selector .mdw-popup-image.up > .elementor-widget-image{
    z-index: 101;
}
selector .mdw-popup-image .elementor-widget-image img{
    object-fit: cover;
    height: 100%;
    width: 100%;
    transition: all calc(500ms/2) ease-in-out;
}
selector .mdw-popup-image.scale .elementor-widget-image img{
    transform: scaleX(1.4) skew(5deg);
}

body.fixed{
    overflow: hidden;
}
selector .elementor-heading-title::selection,
selector img::selection{
  background: transparent;
  color: currentColor;
}
selector{
    -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px){
selector .empty-con{
    display: none;
}
selector .elementor-widget-heading{
    position: static;
}
}


/* Always 100vw width regardless of the scrollbar */
html, body{
    width: 100vw !important;
}

 

JavaScript Code Snippet for Animated Lightbox:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
(function($){
    
var className = 'mdw-popup-image',
    transition = 500,
    x1 = [], y1 = [],
    w1 = [], h1 = [],
    currentIndex, prevIndex,
    currentParent, prevParent

function setPopupDimention(image){
    
    var img = image.find('img'),
    imgRatio = img.prop('naturalWidth')/img.prop('naturalHeight'),
    windowRatio = $(window).width()/$(window).height()
    
    if( windowRatio > imgRatio ) {
        h2 = $(window).height()*8/10
        w2 = imgRatio*h2
    }else{
        w2 = $(window).width()*8/10
        h2 = w2/imgRatio
    }
    
    return {
        'w2': w2,
        'h2': h2
    }
}

function adjustImages(){
    
    $('.' + className + ' .elementor-widget-image').each(function(){
    
        var image = $(this),
        container = image.closest('.'+className),
        w = container.width(),
        d = setPopupDimention(image),
        i = container.index(),
        pos = container.offset()
        
        if( container.hasClass('active-con') ){
            
            image.height(d['h2'])
            image.width(d['w2'])

            x1[i] = pos.left + parseInt(container.css('padding-left'))
            y1[i] = pos.top - $(window).scrollTop() + parseInt(container.css('padding-top'))
            w1[i] = w
            h1[i] = w
        }else{
            image.height(w)
            image.width(w)
        }
        container.height(w)
    })
}

$(document).ready(function(){
    
function isClickedInside(target){
    
    return target.closest('.' + className + ' .e-con, .' + className + ' .e-container, .' + className + ' .elementor-widget').length
}

function getContainer(target){
    
    if(isClickedInside(target)){
        return target.closest('.' + className)
    }else{
        return
    }
}

function openPopup(target){
    
    var container = getContainer(target),
    image = container.find('.elementor-widget-image'),
    pos = image.offset(),
    i = container.index(),
    d2 = setPopupDimention(image)
    
    currentParent = container.parent()

    if(container.hasClass('active-con')){ return }
    
    currentIndex = i
    
    $('body').addClass('fixed')
    
    w1[i] = container.width()
    h1[i] = container.height()
    x1[i] = pos.left
    y1[i] = pos.top - $(window).scrollTop()
    
    image.css({
        'left': x1[i],
        'top': y1[i],
        'width': w1[i],
        'height': w1[i]
    })
    
    container.addClass('active-con scale up')
    setTimeout(function(){
        container.removeClass('scale')
    },50+(transition/2))
    
    setTimeout(function(){
        image.css({
            'left': '50%', 
            'top': '50%',
            'transform': 'translate(-50%,-50%)',
            'width': d2['w2'],
            'height': d2['h2']
        })
    },50)
}

function closePopup(){
    
    var parent = $('.' + className).parent()
    
    parent.each(function(){
        
    var container = $(this).children().eq(prevIndex),
    image = container.find('.elementor-widget-image'),
    i = prevIndex
    
    if(!container.hasClass('active-con')) return
    
    image.css({
        'left': x1[i], 
        'top': y1[i],
        'width': w1[i],
        'height': h1[i],
        'transform': 'none',
    })
    
    if(!container.hasClass('scale')){
        container.addClass('scale')
    }
    container.removeClass('up')
    setTimeout(function(){
        container.removeClass('scale')
    },(transition/2))
    
    setTimeout(function(){
        container.removeClass('active-con')
        if(!$('.active-con').length){
            $('body').removeClass('fixed')    
        }
        image.css({
            'left': 'unset',
            'top': 'unset'
        })
    },(transition+50))
    
    })
}

function emptyContainer(){
    $('.' + className).siblings().each(function(){
        if(!$(this).find('.elementor-widget').length){
            $(this).addClass('empty-con')
        }
    })
}

adjustImages()
emptyContainer()

$('body').on('click', function(e){
    
    var target = $(e.target)
        
    if( isClickedInside(target) ) {
        openPopup(target)
    }else{
        currentIndex = undefined
        currentParent = undefined
    }
    
    var diffParent = prevParent && prevParent.length && !prevParent.is(currentParent)
    
    if( prevIndex && currentIndex != prevIndex || diffParent) { closePopup() }
    prevIndex = currentIndex
    prevParent = currentParent
})

})

$(window).on('load resize', function(){
    adjustImages()
    setTimeout(adjustImages,50)
})

})(jQuery)

</script>