How to use
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/vendor/shufflejs/dist/shuffle.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body>
tag, to enable it.
<script>
(function() {
// INITIALIZATION OF SHUFFLE
// =======================================================
class ShufflePorfolio {
constructor(element) {
this.element = element;
this.shuffle = new Shuffle(element, {
itemSelector: '.js-shuffle-item',
speed: 500
})
this.addFilterButtons()
}
addFilterButtons() {
const options = document.querySelector('.js-filter-options')
if (!options) {
return
}
const filterButtons = Array.from(options.children)
const onClick = this._handleFilterClick.bind(this)
filterButtons.forEach((button) => {
button.addEventListener('click', onClick, false)
});
}
_handleFilterClick(evt) {
const btn = evt.currentTarget.firstElementChild
const isActive = btn.classList.contains('active')
const btnGroup = btn.getAttribute('data-group')
this._removeActiveClassFromChildren(btn.parentNode.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].firstElementChild.classList.remove('active')
}
}
}
new ShufflePorfolio(document.querySelector('.js-shuffle'))
})()
</script>
Basic example
<div class="text-center mb-7">
<!-- Nav -->
<ul class="js-filter-options nav nav-segment nav-pills">
<li class="nav-item">
<a class="nav-link active" href="javascript:;" data-group="all">All</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" data-group="branding">Branding</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" data-group="product">Product</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" data-group="design">Design</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:;" data-group="illustration">Illustration</a>
</li>
</ul>
<!-- End Nav -->
</div>
<div class="js-shuffle row row-cols-1 row-cols-sm-2 row-cols-md-3">
<div class="js-shuffle-item col mb-5" data-groups='["product"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img12.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Product</span>
<h3 class="card-title">Canva Schedule</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img11.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Branding</span>
<h3 class="card-title">Electro bike</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img21.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Branding</span>
<h3 class="card-title">Larq</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["product"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img24.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Product</span>
<h3 class="card-title">Zibbet</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["illustration"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img19.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Illustration</span>
<h3 class="card-title">Adobe Ai</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img20.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Branding</span>
<h3 class="card-title">Goby</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["branding"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img22.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Branding</span>
<h3 class="card-title">OK</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["design"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img23.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Design</span>
<h3 class="card-title">Flaunter</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="js-shuffle-item col mb-5" data-groups='["design"]'>
<!-- Card -->
<a class="card card-flush card-transition" href="#">
<img class="card-img-top" src="../assets/img/400x500/img10.jpg" alt="Image Description">
<div class="card-body">
<span class="card-subtitle text-body">Design</span>
<h3 class="card-title">Inside weather</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->