Filter Plugin: List View – Grid View – Filter links in Lightbox

This is free code. But you can  pay me to get priority support + free install + free customize. Send me an email via this form if you have any problems.

Apply for

• Universal Filter Plugin on Gallery Strips

Grid view (Initial)

List View

Lightbox

Code (Footer Injection)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.floating-buttons .list').click(function() {
    $('body').addClass('list-view');
});

$('.floating-buttons .grid').click(function() {
    $('body').removeClass('list-view');
});
});
</script>
<script>
jQuery(document).ready(function($) {
    var lightboxHtml = `
        <div class="filter-lightbox-overlay" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:999998;">
            <div class="filter-lightbox-container" style="position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:600px;max-height:80vh;background:#fff;border-radius:8px;z-index:999999;overflow:hidden;">
                <div class="filter-lightbox-header" style="padding:20px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center;">
                    <h3 style="margin:0;font-size:18px;font-weight:bold;">Filter Options</h3>
                    <button class="filter-lightbox-close" style="background:none;border:none;font-size:24px;cursor:pointer;padding:5px;">&times;</button>
                </div>
                <div class="filter-lightbox-content" style="padding:20px;overflow-y:auto;max-height:calc(80vh - 80px);"></div>
            </div>
        </div>
    `;
    
    $('body').append(lightboxHtml);
    
    $('.floating-buttons .filter').on('click', function(e) {
        e.preventDefault();
        
        var $originalFilters = $('.customFiltersWrapper').first();
        if ($originalFilters.length) {
            var $clonedFilters = $originalFilters.clone(false);
            
            $clonedFilters.css({
                'display': 'block',
                'position': 'relative',
                'transform': 'none',
                'width': '100%',
                'height': 'auto',
                'border': 'none',
                'background': 'transparent'
            });
            
            $clonedFilters.find('.mobile-filter-trigger, .mobile-panel-close').hide();
            $clonedFilters.find('.customFiltersContainer').css({
                'padding': '0',
                'height': 'auto',
                'overflow': 'visible'
            });
            
            $('.filter-lightbox-content').html($clonedFilters);
            $('.filter-lightbox-overlay').fadeIn(300);
            $('body').css('overflow', 'hidden');
            
            setTimeout(function() {
                $('.filter-lightbox-content .archive-dropdown-toggle-checkbox').each(function(index) {
                    var newId = 'lightbox-filter-' + index;
                    $(this).attr('id', newId);
                    $(this).next('label').attr('for', newId);
                });
                
                $originalFilters.find('.archive-group-name-link.active').each(function() {
                    var filterVal = $(this).attr('data-filter-val');
                    var filterType = $(this).attr('data-filter');
                    $('.filter-lightbox-content')
                        .find('.archive-group-name-link[data-filter="' + filterType + '"][data-filter-val="' + filterVal + '"]')
                        .addClass('active');
                });
                
                $originalFilters.find('.filterDropdown.dirty').each(function() {
                    var filterType = $(this).attr('data-filter');
                    var filterValues = $(this).find('.filterValues').html();
                    var $lightboxDropdown = $('.filter-lightbox-content').find('.filterDropdown[data-filter="' + filterType + '"]');
                    $lightboxDropdown.addClass('dirty');
                    $lightboxDropdown.find('.filterValues').html(filterValues);
                    $lightboxDropdown.find('.archive-dropdown-toggle-title').addClass('dirty');
                });
            }, 100);
        }
    });
    
    $(document).on('click', '.filter-lightbox-close, .filter-lightbox-overlay', function(e) {
        if (e.target === this) {
            $('.filter-lightbox-overlay').fadeOut(300);
            $('body').css('overflow', '');
        }
    });
    
    $(document).on('click', '.filter-lightbox-content .archive-group-name-link', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var filterVal = $(this).attr('data-filter-val');
        var filterType = $(this).attr('data-filter');
        
        var $originalLink = $('.gallery-strips-wrapper').closest('.gallery-strips')
            .find('.customFiltersWrapper').first()
            .find('.archive-group-name-link[data-filter="' + filterType + '"][data-filter-val="' + filterVal + '"]');
        
        if ($originalLink.length) {
            $originalLink[0].click();
            
            setTimeout(function() {
                var $originalDropdown = $originalLink.closest('.filterDropdown');
                var $lightboxDropdown = $('.filter-lightbox-content').find('.filterDropdown[data-filter="' + filterType + '"]');
                
                $lightboxDropdown.find('.archive-group-name-link').removeClass('active');
                $lightboxDropdown.find('.archive-group-name-link[data-filter-val="' + filterVal + '"]').addClass('active');
                
                var newFilterValues = $originalDropdown.find('.filterValues').html();
                $lightboxDropdown.find('.filterValues').html(newFilterValues);
                
                if (newFilterValues && newFilterValues.trim()) {
                    $lightboxDropdown.addClass('dirty');
                    $lightboxDropdown.find('.archive-dropdown-toggle-title').addClass('dirty');
                } else {
                    $lightboxDropdown.removeClass('dirty');
                    $lightboxDropdown.find('.archive-dropdown-toggle-title').removeClass('dirty');
                }
            }, 100);
        }
    });
    
    $(document).on('click', '.filter-lightbox-content .reset-button', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        var filterType = $(this).closest('.filterDropdown').attr('data-filter');
        
        var $originalReset = $('.gallery-strips-wrapper').closest('.gallery-strips')
            .find('.customFiltersWrapper').first()
            .find('.filterDropdown[data-filter="' + filterType + '"] .reset-button').first();
        
        if ($originalReset.length) {
            $originalReset[0].click();
            
            var $lightboxDropdown = $(this).closest('.filterDropdown');
            $lightboxDropdown.find('.archive-group-name-link').removeClass('active');
            $lightboxDropdown.find('.filterValues').html('');
            $lightboxDropdown.removeClass('dirty');
            $lightboxDropdown.find('.archive-dropdown-toggle-title').removeClass('dirty');
        }
    });
    
    $(document).keydown(function(e) {
        if (e.keyCode === 27) {
            $('.filter-lightbox-overlay').fadeOut(300);
            $('body').css('overflow', '');
        }
    });
});
</script>
<style>
div.filter-lightbox-content .archive-block-wrapper>*:not(ul) {
    display: none !important;
}
.filter-lightbox-overlay ul li {
    margin-right: 20px;
    margin-bottom: 10px;
}
.filter-lightbox-overlay ul {
    display: flex;
    flex-wrap: wrap;
}
.filter-lightbox-overlay .archive-block-setting-layout-dropdown.archive-block-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    background-color: #fff !important;
}
  .list-view p {
    font-size: 20px !important;
}
</style>