Gallery
Component 1
Artwork
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
<div class="gallery-mansorny-template">
<div class="container">
<section class="muse-section py-4 py-md-5 mt-2">
<div class="masonry-filters">
<span>Artwork</span>
<button data-group="all" class="active">Artwork</button>
<button data-group="Branding">Branding</button>
<button data-group="UIDesign">UI Design</button>
<button data-group="Graphics">Graphics</button>
<button data-group="Illustration">Illustration</button>
<button data-group="Prototyping">Prototyping</button>
</div>
<div class="masonry work-small-thumb">
<div class="masonry-item" data-groups='["Prototyping"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary1.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Branding"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary2.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["UIDesign"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary3.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Graphics"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary4.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Illustration"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary6.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Prototyping"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary5.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Illustration"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary9.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["UIDesign"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary7.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Branding"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary8.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="../assets/vendor/shufflejs/dist/shuffle.min.js"></script>
<script>
//Muse Masonry JavaScript
var museShuffle = window.Shuffle;
class museShuffleContainer {
constructor(element) {
this.element = element;
this.shuffle = new museShuffle(element, {
itemSelector: '.masonry-item',
sizer: element.querySelector('.my-sizer-element'),
});
this._activeFilters = [];
this.museShuffleFilter();
}
museShuffleFilter() {
const options = document.querySelector('.masonry-filters');
if (!options) {
return;
}
const museShuffleButton = Array.from(options.children);
const onClick = this._handleFilterClick.bind(this);
museShuffleButton.forEach((button) => {
button.addEventListener('click', onClick, false);
});
}
_handleFilterClick(evt) {
const btn = evt.currentTarget;
const isActive = btn.classList.contains('active');
const btnGroup = btn.getAttribute('data-group');
this._removeActiveClassFromChildren(btn.parentNode);
let filterGroup;
if (isActive) {
btn.classList.remove('active');
filterGroup = Shuffle.ALL_ITEMS;
}
else {
btn.classList.add('active');
filterGroup = btnGroup;
}
this.shuffle.filter(filterGroup);
}
_removeActiveClassFromChildren(parent) {
const { children } = parent;
for (let i = children.length - 1; i >= 0; i--) {
children[i].classList.remove('active');
}
}
}
document.addEventListener('DOMContentLoaded', () => {
document.querySelectorAll('.masonry').forEach(museMasonry => {
window.museShuffleContainer = new museShuffleContainer(museMasonry);
});
});
</script>
Component 2
Artwork
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
Graphics
Shrimp Coctail Party
<div class="gallery-mansorny-template">
<div class="container">
<section class="muse-section py-4 py-md-5 mt-2">
<div class="masonry-filters">
<span>Artwork</span>
<button data-group="all" class="active">Artwork</button>
<button data-group="Branding">Branding</button>
<button data-group="UIDesign">UI Design</button>
<button data-group="Graphics">Graphics</button>
<button data-group="Illustration">Illustration</button>
<button data-group="Prototyping">Prototyping</button>
</div>
<div class="masonry work-small-thumb">
<div class="masonry-item" data-groups='["Prototyping"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary1.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Branding"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/grid-gallery1.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["UIDesign"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/grid-gallery4.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Graphics"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/grid-gallery5.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
<div class="masonry-item onethird" data-groups='["Illustration"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/grid-gallery2.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item onethird" data-groups='["Illustration"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/grid-gallery3.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5>
</div>
</div>
</div>
</div>
<div class="masonry-item" data-groups='["Graphics"]'>
<div class="rounded-12 shadow-dark-80 position-relative overflow-hidden">
<div class="masonary-image"><a href="#"><img src="../assets/img/pages/masonary3.jpg" class="rounded-12 w-100" alt="Masonary"></a></div>
<div class="masonary-info">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 350 44">
<path d="M0,0S226.918,69.379,350,0V44H0Z" fill="#fff"/>
</svg>
<div class="info-inner">
<small class="text-gray-600">Graphics</small><h5 class="mb-0 mt-1"><a href="#">Shrimp Coctail Party</a></h5></div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>