{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }} <script defer src="{{ $masonry.RelPermalink }}"></script> {{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }} <script defer src="{{ $imagesloaded.RelPermalink }}"></script> <script> window.onload = function() { // ========================= masonry ========================= var grid = document.querySelector('.grid'); var msnry = new Masonry(grid, { itemSelector: '.grid-item', columnWidth: '.grid-sizer', percentPosition: true, }); imagesLoaded(grid).on('progress', function () { msnry.layout(); }); document.querySelectorAll('.grid-item').forEach(function(elem) { elem.addEventListener('mouseenter', function() { elem.querySelector('.grid-item__desc').style.display = 'block'; elem.querySelector('.grid-item__desc').style.opacity = 1; elem.querySelector('.grid-item__desc--text').onclick = function (e) { e.stopPropagation(); e.target.parentNode.previousElementSibling.click(); } elem.querySelector('.grid-item__desc').onclick = function(e) { e.target.previousElementSibling.click(); } }); elem.addEventListener('mouseleave', function () { elem.querySelector('.grid-item__desc').style.opacity = 0; }); }); enquire.register("screen and (max-width:1200px)", { match: function () { document.querySelectorAll('.grid-item').forEach(function(elem) { elem.classList.add('quarter'); elem.classList.remove('fifth'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('quarter'); elem.classList.remove('fifth'); }); }, unmatch: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('fifth'); elem.classList.remove('quarter'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('fifth'); elem.classList.remove('quarter'); }); }, }).register("screen and (max-width:900px)", { match: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('third'); elem.classList.remove('quarter'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('third'); elem.classList.remove('quarter'); }); }, unmatch: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('quarter'); elem.classList.remove('third'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('quarter'); elem.classList.remove('third'); }); }, }).register("screen and (max-width:700px)", { match: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('half'); elem.classList.remove('third'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('half'); elem.classList.remove('third'); }); }, unmatch: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('third'); elem.classList.remove('half'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('third'); elem.classList.remove('half'); }); }, }).register("screen and (max-width:500px)", { match: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('full'); elem.classList.remove('half'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('full'); elem.classList.remove('half'); }); }, unmatch: function () { document.querySelectorAll('.grid-item').forEach(function (elem) { elem.classList.add('half'); elem.classList.remove('full'); }); document.querySelectorAll('.grid-sizer').forEach(function (elem) { elem.classList.add('half'); elem.classList.remove('full'); }); }, }); // =========================================================== } </script>