https://www.wardssheds.com/wp-content/themes/seadev-child/block-templates/seadev-gallery/seadev-gallery.js

1(function($){
2
3    /**
4     * initializeBlock
5     *
6     * Adds custom JavaScript to the block HTML.
7     *
8     * @date    15/4/19
9     * @since   1.0.0
10     *
11     * @param   object $block The block jQuery element.
12     * @param   object attributes The block attributes (only available when editing).
13     * @return  void
14     */
15    var initializeBlock = function( block ) {
16        if( block.hasClass( 'seadev-gallery-default' ) ) {
17            block.each(function() {
18                var gallery_id = "#gallery-js-" + block.attr("id");
19                var imgs = $("img");
20                // block.find( gallery_id ).unitegallery();
21                block.find( gallery_id ).isotope({
22                    itemSelector: '.gallery-item',
23                    layoutMode: 'packery'
24                });
25                imgs.load(function () {
26                    block.find(gallery_id).isotope('layout');
27                }); 
28
29            });            
30        }
31
32        if( block.hasClass( 'seadev-gallery-portfolio' ) ){
33            // init Isotope
34            var $grid = block.find('.wrap-grids').isotope({
35                itemSelector: '.grid-item',
36                layoutMode: 'fitRows',
37            });
38            
39            // bind filter button click
40            block.find( '.filter-portfolio' ).on( 'click', '.filter', function(e) {
41                var filterValue = $( this ).data('filter');
42                $grid.isotope({ filter: filterValue });
43            });
44
45            // change active class on buttons
46            block.find( '.filter-portfolio' ).on( 'click', '.filter', function(e) {
47                block.find('.filter-portfolio .active').removeClass('active');
48                $( this ).addClass('active');
49                return false
50            });
51            
52            block.find( '.grid-image a' ).fancybox({
53                fancybox : 'gallery',
54                caption : function( instance, item ) {
55                    return $(this).next('figcaption').html();
56                }
57            });
58        }
59    }
60
61    // Initialize each block on page load (front end).
62    // $(document).on('ready', function() {
63    $(window).load( function() {
64        $( ".seadev-gallery" ).each( function( key, obj ) {
65                initializeBlock( $( this ) );
66        } )       
67    });
68    // Initialize dynamic block preview (editor).
69    if( window.acf ) {
70        window.acf.addAction( 'render_block_preview', initializeBlock );
71    }
72
73
74})(jQuery);