Изотоп нет сообщения о результатах для комбинированных фильтров

Question

Я наконец обращаюсь за помощью. Я пытаюсь получить сообщение о результатах, которое не будет отображаться в моей галерее изображений Isotope уже неделю, и мне не повезло. В какой-то момент у меня был пример работы, но сообщение не скрывалось до тех пор, пока анимация не была завершена, поэтому оно не выглядело хорошо.

Конечно, у кого-то есть решение.

Я был бы очень признателен, если бы кто-нибудь смог мне помочь. У меня есть тестовый сайт, на который я буду ссылаться здесь всего за секунду.

На данный момент вот первая половина моего файла конфигурации изотопов. У меня есть ".message-div", расположенный в нижней части моего #isotopegallery div с применением css "display: none;."

jQuery(window).load(function() {

    var $container = $('#isotopegallery').imagesLoaded(function() {
        $container.isotope({
            itemSelector: '.photo',
            masonry: {
                columnWidth: 161,
                gutter: 10
            },
            transitionDuration: '0.6s'
        });

        // Filters
        //
        var filters = {};
        $('#isotopefilters').on('click', '.menu-item', function() {

            var $this = $(this);
            // get group key
            var $buttonGroup = $this.parents('.filter-title');
            var filterGroup = $buttonGroup.attr('data-filter-group');
            // set filter for group
            filters[filterGroup] = $this.attr('data-filter');
            // combine filters
            var filterValue = '';
            for (var prop in filters) {
                filterValue += filters[prop];
            }

            $container.isotope({filter: filterValue});

            // Possibility
            $container.isotope( 'on', 'layoutComplete',
              function( iso, laidOutItems ) {
                if ( laidOutItems < 1 ) {
                $('.message-div').fadeIn('slow');
                } else {
                $('.message-div').fadeOut('fast');
                }
             })
        });
    });
});

Answer 1

Существует простой способ обойти сообщение "нет результата". Рассмотрим ".photo" как класс для itemSelector. Так как изотоп просто присоединяет ".isotope-hidden" к контейнеру div, если он не соответствует фильтру, число этих элементов div равно сумме всех элементов изотопа в случае "результата нет". Легко:

if($(".isotope-hidden").length == $(".photo").length) {
    $("#mynoresults").show();
    }