Gallery Masonry Category

Support: [email protected]
Free install (1 site)
View Demo – Password: abc

Description: adding category filter to Gallery Masonry

Gallery masonry category 1

#1. Install Code

Hover on page where you use Gallery Masonry > Click Gear icon

Gallery masonry category 2

Next, click Advanced > Paste this code

<!-- @tuanphan - Gallery Masonry Category -->
<style>
:root {
    --filter-bar-gap: 10px;
    --filter-btn-padding-vertical: 10px;
    --filter-btn-padding-horizontal: 20px;
    --filter-btn-font-size: 14px;
    --filter-btn-border-radius: 4px;
    --filter-btn-bg: #fff;
    --filter-btn-color: #000;
    --filter-btn-border-color: #000;
    --filter-btn-hover-bg: #f0f0f0;
    --filter-btn-active-bg: #000;
    --filter-btn-active-color: #fff;
}
.gallery-filter-bar{display:flex;flex-wrap:wrap;gap:var(--filter-bar-gap);margin-bottom:30px;padding:20px 0;justify-content:center}.filter-btn{padding:var(--filter-btn-padding-vertical) var(--filter-btn-padding-horizontal);cursor:pointer;background-color:var(--filter-btn-bg);color:var(--filter-btn-color);border:2px solid var(--filter-btn-border-color);font-size:var(--filter-btn-font-size);font-weight:500;transition:all 0.3s ease;border-radius:var(--filter-btn-border-radius)}.filter-btn:hover{background-color:var(--filter-btn-hover-bg)}.filter-btn.active{background-color:var(--filter-btn-active-bg);color:var(--filter-btn-active-color)}.filter-btn.active:hover{background-color:var(--filter-btn-active-bg)}section[id*="masonry-category"] .gallery-caption{display:none}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){const sections=document.querySelectorAll('section[id*="masonry-category"]');if(sections.length===0){return}
sections.forEach(section=>{initializeGalleryFilter(section)});function initializeGalleryFilter(sectionElement){const galleryWrapper=sectionElement.querySelector('.gallery-masonry-wrapper');if(!galleryWrapper){return}
let activeFilter='all';let allItems=[];function extractCategories(){const categories=new Set();const items=galleryWrapper.querySelectorAll('.gallery-masonry-item');items.forEach(item=>{const figcaption=item.querySelector('.gallery-caption-content');if(figcaption){const text=figcaption.textContent;const match=text.match(/Category:\s*(.+)/);if(match){const cats=match[1].split(',').map(cat=>cat.trim());cats.forEach(cat=>categories.add(cat));item.dataset.categories=cats.join('|')}}});return Array.from(categories).sort()}
function createFilterBar(){const categories=extractCategories();if(categories.length===0){return null}
const filterBar=document.createElement('div');filterBar.className='gallery-filter-bar';const allButton=createFilterButton('All','all',!0);filterBar.appendChild(allButton);categories.forEach(category=>{const button=createFilterButton(category,category,!1);filterBar.appendChild(button)});galleryWrapper.parentElement.insertBefore(filterBar,galleryWrapper);return filterBar}
function createFilterButton(label,value,isActive){const button=document.createElement('button');button.textContent=label;button.dataset.filter=value;button.className=isActive?'filter-btn active':'filter-btn';button.addEventListener('click',function(){handleFilterClick(this)});return button}
function handleFilterClick(clickedButton){const filterButtons=sectionElement.querySelectorAll('.filter-btn');filterButtons.forEach(btn=>{btn.classList.remove('active')});clickedButton.classList.add('active');activeFilter=clickedButton.dataset.filter;filterItems()}
function filterItems(){allItems=Array.from(galleryWrapper.querySelectorAll('.gallery-masonry-item'));galleryWrapper.classList.remove('gallery-masonry-list--ready');allItems.forEach(item=>{if(activeFilter==='all'){item.style.display='';item.setAttribute('data-show','true')}else{const categories=item.dataset.categories||'';if(categories.split('|').includes(activeFilter)){item.style.display='';item.setAttribute('data-show','true')}else{item.style.display='none';item.setAttribute('data-show','false')}}});requestAnimationFrame(()=>{galleryWrapper.classList.add('gallery-masonry-list--ready');triggerMasonryLayout()})}
function triggerMasonryLayout(){const delays=[0,50,100,200,400,600];delays.forEach(delay=>{setTimeout(()=>{window.dispatchEvent(new Event('resize'));const images=galleryWrapper.querySelectorAll('img[data-show="true"]');images.forEach(img=>{if(!img.complete){img.addEventListener('load',()=>{window.dispatchEvent(new Event('resize'))},{once:!0})}})},delay)})}
createFilterBar();filterItems()}})
</script>

Gallery masonry category 3