i want use Mixitup for Portfolio in my index page.
in index page i have a 'nav nav-tabs' & Mixitup items.
when i click on nav tab, mixitup items Hide.
Such as conflict.
how can i fix it ?
$(document).ready(function(){
var iast_MainGallery = document.querySelector('#iast-GalleryMainMix');
var mixer = mixitup(iast_MainGallery, {
animation: {
effects: 'fade scale stagger(50ms)' // Set a 'stagger' effect for the loading animation
},
load: {
filter: 'none' // Ensure all targets start from hidden (i.e. display: none;)
}
});
iast_MainGallery.classList.add('mixitup-ready');
mixer.show()
.then(function() {
// Remove the stagger effect for any subsequent operations
mixer.configure({
animation: {
effects: 'fade scale'
}
});
});
}); <div class="iast-GalleryBtnMixIt">
<button class="filter iast-GalleryBtnActive " data-filter="all">all</button>
<button class="filter" data-filter=".category-1">cat1</button>
<button class="filter" data-filter=".category-2">cat2</button>
<button class="filter" data-filter=".category-3">cat3</button>
<button class="filter" data-filter=".category-4">cat4</button>
<button class="filter" data-filter=".category-5">cat5</button>
</div>
<div id="iast-GalleryMainMix" class="container">
<!-- 1 -->
<div class="mix iast-MainGalleryMixItems category-1" data-myorder="1" style="display: inline-block;">
<div class="iast-GalleryItemUniName">
<a href="#">
item1
</a>
</div>
<a href="#">
<img class="img-responsive" src="assets/demo/img/gallery-thumb.jpg" width="150" height="150">
</a>
<div class="iast-GalleryItemDesc">
text
</div>
</div>
</div>js:
mixitup(container, {
selectors: {
control: '[data-mixitup-control]'
}
}
add data-mixitup-control on filters:
<button type="button" data-mixitup-control data-filter=".red">Red</button>
<button type="button" data-mixitup-control data-toggle=".blue">Blue</button>
<button type="button" data-mixitup-control data-sort="default:desc">Sort Desc</button>