Make a Portfolio Gallery with Live Preview Box in Elementor

 

 

JavaScript code snippet:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
var $ = jQuery
$(document).ready(function(){
 
$('.rpb-gallery .elementor-widget-button').remove()
$('.rpb-preview-button .elementor-widget-button').clone().appendTo('.rpb-gallery .elementor-gallery-item__content')


$('.rpb-gallery .elementor-gallery-item__description').each(function(){
    var link = $(this).text().trim()
    $(this).closest('a').attr('href', link)
    $(this).remove()
})

$('.rpb-gallery .e-gallery-item, .rpb-gallery .elementor-widget-button a').on('click', function(e){
    e.preventDefault()
})

var link

$('.rpb-gallery .e-gallery-item').on('mouseenter', function(e){
    
    e.preventDefault()
    link = $(this).attr('href')
    
    $('.rpb-preview iframe').remove()
    $('.rpb-site-link a').attr('href', link)
    
    if( !link || link == '#' ) link = ''
    
    $('.rpb-preview').append('<iframe src="' + link + '"></iframe>')
})

$('.rpb-gallery .e-gallery-item').on('click', function(e){
    
    if( !link || link == '#' ) return
    
    if($(window).width() > 767){
        $('.rpb-popup').addClass('show')
    }else{
        if($(e.target).hasClass('elementor-widget-button') || $(e.target).closest('.elementor-widget-button').length ){
            $('.rpb-popup').addClass('show')
        }
    }
})

function hidePopup(){
    var index = 0
    $('.rpb-popup').removeClass('show')
    $('.rpb-popup').removeClass('desktop tablet mobile')
    $('.rpb-buttons .elementor-widget-button').removeClass('active')
    if( $(window).width() < 1025 ) {
        index = 1
    }
    $('.rpb-buttons .elementor-widget-button').eq(index).addClass('active')
}

$('.rpb-popup').on('click', function(e){
    if( $(e.target).hasClass('rpb-popup') ){
        
        hidePopup()
    }
})

$('.rpb-back a').on('click', hidePopup)

$('.rpb-buttons .elementor-widget-button').on('click', function(){
    var index = $(this).index(),
    popupClass = 'desktop'
        
    if(index == 0) { popupClass = 'desktop' }
    if(index == 1) { popupClass = 'tablet' }
    if(index == 2) { popupClass = 'mobile' }
  
    $('.rpb-popup').removeClass('desktop tablet mobile')
    $('.rpb-popup').addClass(popupClass)
    $('.rpb-buttons .elementor-widget-button').removeClass('active')
    $(this).addClass('active')
})
})

$(window).on('load resize', function(){
var index = 0
if( $(window).width() < 1025 ) {
    index = 1
}
$('.rpb-buttons .elementor-widget-button').removeClass('active')
$('.rpb-buttons .elementor-widget-button').eq(index).addClass('active')
})

$(window).on('load', function(){
setTimeout(function(){
    $('.rpb-gallery').addClass('show')    
},500)
})

</script>

 

CSS code snippet on Gallery Widget:

selector{
    --horizontal-gap: 30px;
    --caption-background: #fff
}
selector .e-gallery-image{
    background-position: top;
}
selector .elementor-gallery-item__title{
    background: var(--caption-background);
    width: auto;
    padding: 8px 15px;
    border-radius: 5px;
    box-shadow: 0 0 20px 0 rgba(0,0,0,0.1);
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
}
selector .e-gallery-item:hover .elementor-gallery-item__title{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transform: translateY(0);
}
selector .elementor-widget-button{
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(10px);
}
selector .e-gallery-item:hover .elementor-widget-button{
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    opacity: 1;
    transform: translateY(0);
}
selector .e-gallery-grid {
    --hgap: var(--horizontal-gap) !important;
}
selector a:focus{
    outline: none;
}
selector:not(.show) .elementor-gallery-item{
    border-color: transparent;
}
body.elementor-editor-preview selector:not(.show) .elementor-gallery-item,
body.elementor-editor-active selector:not(.show) .elementor-gallery-item{
    border-color: var(--image-border-color);
}

 

CSS code snippet on Popup Container:

selector{
    --tablet-width: 768px;
    --mobile-width: 420px;
    --active-button-color: #5453FD;
    --tablet-preview-bar-padding: 35px;
    --bottom-line-color: #0302B5;
}
selector{
    visibility: hidden;
    opacity: 0;
}
selector.show{
    visibility: visible;
    opacity: 1;
}
selector iframe{
    width: 100%;
    height: 100%;
}
selector .elementor-widget-button.active a{
    background: var(--active-button-color);
}
selector.tablet > .e-container,
selector.tablet > .e-con{
    width: var(--tablet-width);
}
selector.mobile > .e-container,
selector.mobile > .e-con{
    width: var(--mobile-width);
}
selector.tablet .rpb-bar{
    --padding-left: var(--tablet-preview-bar-padding);
    --padding-right: var(--tablet-preview-bar-padding);
}
selector.mobile .rpb-back,
selector.mobile .rpb-site-link{
    opacity: 0;
    pointer-events: none;
    width: 0;
}
selector a:focus{
    outline: none;
}
selector .rpb-preview{
    height: calc(100vh - 135px);
}
selector .rpb-preview:before{
    content: "";
    position: absolute;
    top: -2px;
    height: 3px;
    width: 100%;
    background: var(--bottom-line-color);
    left: 0;
}

@media (min-width: 1025px) and (max-width: 1130px){
selector{
    --padding-left: 0;
    --padding-right: 0;
    --padding-top: 0;
    --x: 50px;
    --y: 85px;
}
selector > .e-container,
selector > .e-con{
    max-width: 100vw;
    width: 100vw;
    transform: scale(0.9);
    transform-origin: bottom;
    position: absolute;
    bottom: 0;
}
selector .rpb-preview{
    height: calc( (10/9 * (100vh - var(--x))) - var(--y));
}
}
@media (min-width: 768px) and (max-width: 880px){
selector{
    --padding-left: 0;
    --padding-right: 0;
    --padding-top: 0;
    --x: 50px;
    --y: 85px;
}
selector > .e-container,
selector > .e-con{
    max-width: 100vw;
    width: 100vw;
    transform: scale(0.9);
    transform-origin: bottom;
    position: absolute;
    bottom: 0;
}
selector .rpb-preview{
    height: calc( (10/9 * (100vh - var(--x))) - var(--y));
}
}

@media (max-width: 1024px){
selector{
    --tablet-width: 100%;
}
}

@media (max-width: 767px){
selector{
    --mobile-width: 100%;
}
selector .rpb-preview{
    height: calc(100vh - 115px);
}
}

@media (max-width: 450px){
selector{
    --padding-left: 0;
    --padding-right: 0;
    --padding-top: 0;
    --x: 40px;
    --y: 85px;
}
selector > .e-container,
selector > .e-con{
    max-width: 100vw;
    width: 100vw;
    transform: scale(0.9);
    transform-origin: bottom;
    position: absolute;
    bottom: 0;
}
selector .rpb-preview{
    height: calc( (10/9 * (100vh - var(--x))) - var(--y));
}
}