Видео описание
У меня есть две функции которые должны работать при нажатии на одну кнопку( кнопок будет несколько). Первая функция отвечает за работу фильтра и анимацию карточек, а вторая за сетку масонри. При переключении фильтра(первая функция), сетка масонри(вторая функция) сбиваеться, поэтому ее нужно перезагружать. \
Сделать так, что бы при нажатии на кнопку с фильтром, внешниц вид сетки масонри оставался таким же как и при первой загрузке страницы. Тоесть когда выбираешь один из фильтров, то количество карточек меняеться но внешний вид и анимация сетки масонри оставаль такой же как и при первой загрузки страницы.
Страница с сайтом https://limitedgravity.webflow.io/work-copy
Прошу заметить что сайт разработан на платформе webflow и структуру html нужно оставить такой же. Это связано с тем что карточки подвязаны под встроеную cms которая должна иметь определьоную структуру.
Примечание : Возможный вариант событий: При загрузки первой функции сделать так что бы перезагружалась сетка масонри. Важно что бы анимация при переключении оставалась без рывков.
macyInstance.recalculate(true);
- перезагружает сетку масонри.
Первая функция
Отвечает за переключение фильтров и анимацию всередине карточек.
Работоет с библиотекой https://www.finsweet.com/cms-library-script-writer/
<!--- start cms-library-script-writer.finsweet --->
<script src="<https://cdn.finsweet.com/files/cmslibrary-v1.8.js>"></script>
<script>
(function() {
var fsComponent = new FsLibrary('.macy-container')
var myFilters = [
{
filterWrapper: '.filter-wrapper',
filterType: 'exclusive'
}
]
fsComponent.filter({
filterArray: myFilters,
activeClass: 'active-category-masonry',
animation: {
enable: true,
duration: 500,
easing: 'ease-out',
effects: 'fade translate(0,30px) ',
}
})
})();
</script>
Вторая функция
Отвечает за работу сетки масонри. При переключении первой функции сетка сбиваеться поэтому нужно обновлять эту функцию с помощью macyInstance.recalculate(true);
Работоет с библиотекой https://github.com/bigbite/macy.js
<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/macy.min.js>"></script>
<script>
var macyInstance = Macy({
container: '#macy-container', //Id of the grid
trueOrder: true,
waitForImages : false ,
margin: 25, //Gap between
columns: 4, //Colums
debug: true,
mobileFirst: true,
breakAt: {
1200: 3,
940: 2,
520: 2,
400: 1
}
});
</script>
// при нажатие на кнопку обновляеться сетку масонри
<script>
var btn1 = document.getElementById('btn1'),
btn2 = document.getElementById('btn2');
function example1() {
macyInstance.recalculate(true);
macyInstance.recalculate(true);
}
btn1.onclick = example1;
btn2.onclick = example1;
</script>
Hidden Work Categories → Categories multiwrap