HTML
    ====
            <div class="wp-gallery__filter">
                <button class="btn-filtration btn-filtration-js" data-filtration="wp-gallery__item">Alle</button>
                <button class="btn-filtration btn-filtration-js" data-filtration="management-category">Management</button>
                <button class="btn-filtration btn-filtration-js" data-filtration="immobilienmakler-category">CENTURY 21 Immobilienmakler</button>
                <button class="btn-filtration btn-filtration-js" data-filtration="logos-category">Logos</button>
                <button class="btn-filtration btn-filtration-js" data-filtration="mrkenbilder-category">Markenbilder</button>
                <button class="btn-filtration open-projects">
                    Projekte
                    <i class="fas fa-angle-down filter-icon"></i>
                </button>
            </div>

            <div id="projects-wrapper">
                <button class="btn-project btn-filtration-js" data-filtration="project-1">Project 1</button>
                <button class="btn-project btn-filtration-js" data-filtration="project-2">Project 2</button>
                <button class="btn-project btn-filtration-js" data-filtration="project-3">Project 3</button>
                <button class="btn-project btn-filtration-js" data-filtration="project-4">Project 4</button>
                <button class="btn-project btn-filtration-js" data-filtration="project-5">Project 5</button>
                <button class="btn-project btn-filtration-js" data-filtration="project-6">Project 6</button>
            </div>

            <div id="wp-gallery">
                <div id="animated-thumbnails" class="wp-gallery">

                    <?php $images = get_field('managment_gallery'); ?>
                    <?php foreach( $images as $image ): ?>
                        <a href='<?php echo $image['url']; ?>' class="wp-gallery__item management-category">
                            <img src="<?php echo $image['sizes']['thumbnail']; ?>" class="wp-gallery__image hide-item" alt="<?php echo $image['caption']; ?>" />
                            <div class="wp-gallery__image" style="background-image: url('<?php echo $image['sizes']['large']; ?>')">
                                <div class="gallery-inner">
                                    <div class="wp-gallery__image-inner">
                                        <?php echo $image['caption']; ?>
                                    </div>
                                </div>
                            </div>
                        </a>
                    <?php endforeach; ?>

                </div>
            </div>


    JS
    ==

    function galleryFilter() {
        //check gallery image quantity
        var galleryItems = $('.wp-gallery__item');
        var galleryContainer = $('#wp-gallery');
        var maxImages = 8;
        var loadBtn = $('#load__gallery-images');

        function imagesQuantity(currentAttr, inc) {
            $.each($('#animated-thumbnails').find($('.wp-gallery__item')), function (index, value) {
                if (index < maxImages) {
                    $(value).show();
                }
            });

            var currentAttr = currentAttr;
            if (currentAttr == undefined) {
                currentAttr = 'wp-gallery__item';
            }

            var inc = inc;
            if (inc == undefined) {
                inc = maxImages;
            }

            if ($('.' + currentAttr).length > maxImages) {
                loadBtn.fadeIn(200);

                loadBtn.on('click', function () {
                    inc += 8;
                    galleryContainer.fadeIn(200);
                    if ($('#animated-thumbnails').find($('.wp-gallery__item')).length <= inc) {
                        loadBtn.fadeOut(200);
                    }

                    $.each($('#animated-thumbnails').find($('.wp-gallery__item')), function (index, value) {
                        if (index < inc) $(value).show();
                    });
                });
            } else {
                loadBtn.fadeOut(200);
                galleryItems.show();
            }
        }
        imagesQuantity();


        //init gallery filter
        $('.btn-filtration-js').on('click', function () {
            var currentAttr = $(this).attr('data-filtration');
            if (!$(this).hasClass('btn-project')) {
                $('#projects-wrapper').slideUp(200);
            }

            galleryContainer.fadeOut(200);
            galleryItems.css('display', '');

            function replaceEl() {
                $('#animated-thumbnails').append(galleryItems);
                $.each(galleryItems, function () {
                    $('#animated-thumbnails').find($('.wp-gallery__item').not($('.' + currentAttr))).remove();
                });

                loadBtn.off('click');
                imagesQuantity(currentAttr, maxImages);

                if ($('body').hasClass('page-template-tpl-downloads')) {
                    $("#animated-thumbnails").data('lightGallery').destroy(true);
                    $("#animated-thumbnails").lightGallery();
                }
            }

            setTimeout(replaceEl, 200);
            galleryContainer.fadeIn(200);
            loadBtn.hide();
        });


        //open gallery projects wrapper
        $('.open-projects').on('click', function () {
            $('#projects-wrapper').slideToggle(300);
            $('.filter-icon').toggleClass('nav-icon_active');
        });


        //trim image description
        var currentEl = $('.wp-gallery__image-inner');
        $.each(currentEl, function (index, value) {
            var currenInfo = value.outerText;

            if (currenInfo !== undefined && currenInfo !== null) {
                if (currenInfo.length > 201) {
                    var trimmedString = currenInfo.substring(0, 200) + ' ...';
                    value.innerHTML = trimmedString
                }
            }
        });
    }


    //init on load
    galleryFilter();