hugo-theme-zzo/layouts/partials/script/gallery-script.html

{{ $enquire := resources.Get "js/enquire.min.js" | resources.Fingerprint }}
<script defer src="{{ $enquire.RelPermalink }}"></script>
{{ $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>
{{ $lazysizes := resources.Get "js/lazysizes.min.js" | resources.Fingerprint }}
<script defer src="{{ $lazysizes.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').onclick = function(e) {
          e.target.previousElementSibling.click();
        }
      });
      elem.addEventListener('mouseleave', function () {
        elem.querySelector('.grid-item__desc').style.display = 'none';
      });
    });

    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>