https://www.redrocker.com/wp-content/themes/sammyhagar/_/inc/js/masonry_images.js?ver=20260309172204

1// remap jQuery to $
2(function($){
3
4
5  function isInViewport(element) {
6    const rect = element.getBoundingClientRect();
7    return rect.top < window.innerHeight && rect.bottom > 0;
8  }
9
10  function debounce(func, wait) {
11    let timeout;
12    return function () {
13      clearTimeout(timeout);
14      timeout = setTimeout(func, wait);
15    };
16  }
17
18  function checkVisibleFigures() {
19    $('.masonry_images figure').each(function () {
20      const $fig = $(this);
21      if (!$fig.hasClass('visible') && isInViewport(this)) {
22        $fig.addClass('visible');
23      }
24    });
25  }
26
27  $(document).ready(function () {
28    const debouncedCheck = debounce(checkVisibleFigures, 35); // default is too slow at 100
29    $(window).on('scroll resize load', debouncedCheck);
30    checkVisibleFigures();
31
32    var $grid = $('.masonry_images');
33
34    $grid.one( 'layoutComplete', function(event, items) {
35      $grid.addClass('masonry_initialized');
36    });
37
38    $grid.masonry({
39      itemSelector: 'figure',
40      percentPosition: true,
41      horizontalOrder: true,
42      originTop: false,
43      gutter: 6
44    });
45
46    // Grayscale-to-color when image loads
47    $('.masonry_images img').each(function () {
48      const $img = $(this);
49      if (this.complete) {
50        $img.addClass('loaded');
51      } else {
52        $img.on('load', function () {
53          $img.addClass('loaded');
54	  if ($grid) {
55	    $grid.masonry('layout');
56	  }
57        });
58      }
59    });
60  });
61
62})(window.jQuery);