$( document ).ready(function() { console.log( "ready!" );var grid = document.querySelector('.grid');var msnry;var imgAll = document.querySelectorAll('.grid-item');var imgNy = document.querySelectorAll('.socialmedia');var imgFlowers = document.querySelectorAll('.customdesign');var imgOthers = document.querySelectorAll('.emailtemplate');var imglogo = document.querySelectorAll('.logodesign');const tabsUl = document.getElementById('buttonGroup');const lis = tabsUl.children;const gridItems = grid.children;imagesLoaded(grid, function(){ msnry = new Masonry( grid, { itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true });});function toggleClass(parentElem, child_elems, className){ for(let i = 0; i < child_elems.length; i++){ if(child_elems[i]==parentElem){ child_elems[i].classList.add(className); } else{ child_elems[i].classList.remove(className); } }}function showImages(showImg, hideImg1, hideImg2){ for(let i = 0; i < showImg.length; i++){ showImg[i].style.display = "block"; } for(let i = 0; i < hideImg1.length; i++){ hideImg1[i].style.display = "none"; } for(let i = 0; i< hideImg2.length; i++){ hideImg2[i].style.display = "none"; }}function showImagesByCategory(imgCat){ for(let i = 0; i < imgAll.length; i++){ imgAll[i].style.display = "none"; } for(let i = 0; i < imgCat.length; i++){ imgCat[i].style.display = "block"; }}tabsUl.addEventListener('click', (event) =>{ let tabLi = event.target.parentNode; toggleClass(tabLi, lis, 'is-active'); if(event.target.id == "all"){ for(let i = 0; i< imgAll.length; i++){ imgAll[i].style.display = "block"; } } if(event.target.id == "socialmedia"){ /*showImages(imgNy, imglogo, imgOthers);*/ showImagesByCategory(imgNy); } if(event.target.id == "customdesign"){ /*showImages(imgFlowers, imgNy, imgOthers);*/ showImagesByCategory(imgFlowers); } if(event.target.id == "emailtemplate"){ /*showImages(imgOthers, imgFlowers, imgNy);*/ showImagesByCategory(imgOthers); } if(event.target.id == "logodesign"){ /*showImages(imgOthers, imgFlowers, imglogo);*/ showImagesByCategory(imglogo); } msnry.layout(); });grid.addEventListener('click',function(event){ let imgContainer = event.target.parentNode; toggleClass(imgContainer, gridItems, 'grid-item__expanded'); msnry.layout();});});
$(function() { $('.tabs nav a').on('click', function() { show_content($(this).index()); }); show_content(0); function show_content(index) { // Make the content visible $('.tabs .content.visible').removeClass('visible'); $('.tabs .content:nth-of-type(' + (index + 1) + ')').addClass('visible'); // Set the tab to selected $('.tabs nav a.selected').removeClass('selected'); $('.tabs nav a:nth-of-type(' + (index + 1) + ')').addClass('selected'); } });