https://onexone.ai/theme/Curburntuef/masonry-script.js

1//jQuery.noConflict();
2
3jQuery(document).ready(function($) {
4    //setTimeout(() => {
5    var grid = document.querySelector('.Curbnturf-grid');
6    var msnry;
7    // element selectors
8    var imgAll = document.querySelectorAll('.Curbnturf-grid-item');
9    var imgNy = document.querySelectorAll('.Blog');
10    var imgFlowers = document.querySelectorAll('.vedio');
11    var imgOthers = document.querySelectorAll('.Podcast');
12    // buttons
13    const tabsUl = document.getElementById('Curbnturf-buttonGroup');
14    if (tabsUl) {
15        const lis = tabsUl.children;
16        const gridItems = grid.children;
17
18        console.log('after functuion grid', grid);
19        $('.Curbnturf-grid').imagesLoaded(function(grid) {
20            console.log('before functuion grid', grid);
21
22            // msnry = new Masonry( grid, {
23            // options
24            // itemSelector: '.Curbnturf-grid-item',
25            // columnWidth: '.Curbnturf-grid-sizer',
26            // percentPosition: true
27            // });
28            msnry = $('.Curbnturf-grid').masonry({
29                itemSelector: '.Curbnturf-grid-item',
30                columnWidth: '.Curbnturf-grid-sizer',
31                percentPosition: true
32            });
33        });
34
35        //element & class name
36        function toggleClass(parentElem, childElems, className) {
37            for (let i = 0; i < childElems.length; i++) {
38                if (childElems[i] == parentElem) {
39                    childElems[i].classList.add(className);
40                } else {
41                    childElems[i].classList.remove(className);
42                }
43            }
44        }
45
46        function showImages(showImg, hideImg1, hideImg2) {
47            for (let i = 0; i < showImg.length; i++) {
48                showImg[i].style.display = "block";
49            }
50            for (let i = 0; i < hideImg1.length; i++) {
51                hideImg1[i].style.display = "none";
52            }
53            for (let i = 0; i < hideImg2.length; i++) {
54                hideImg2[i].style.display = "none";
55            }
56        }
57
58
59        tabsUl.addEventListener('click', (event) => {
60            let tabLi = event.target.parentNode;
61
62            toggleClass(tabLi, lis, 'is-active');
63
64            //show all images
65            if (event.target.id == "all") {
66                for (let i = 0; i < imgAll.length; i++) {
67                    imgAll[i].style.display = "block";
68                }
69            }
70
71            //show ny images
72            if (event.target.id == "Blog") {
73                showImages(imgNy, imgFlowers, imgOthers);
74            }
75
76            // show flowers
77            if (event.target.id == "vedio") {
78                showImages(imgFlowers, imgNy, imgOthers);
79            }
80
81            // show other images
82            if (event.target.id == "Podcast") {
83                showImages(imgOthers, imgFlowers, imgNy);
84            }
85
86            // msnry.layout();
87            msnry.masonry('layout');
88
89        });
90    }
91
92    /*grid.addEventListener('click',function(event){
93    	let imgContainer = event.target.parentNode;
94    	toggleClass(imgContainer, gridItems, 'grid-item__expanded');
95    	msnry.layout();
96    });*/
97    // }, 5000)
98})