CODEWITHSUNDEEP
wordpressfilterjquery-isotopenextgen-gallery
dangleraction
dangleraction

Reputation: 1

Isotope No Results Message for Combination Filters

I am finally reaching out for help. I've been trying to get a no results message to show up on my Isotope image gallery for a week now, with only a little bit of luck. I had an example working at one point, but the message wouldn't hide until the animation was complete, so it didn't look good at all.

Surely someone has a solution.

I would greatly appreciate it if someone is able to help me. I have test site that I will link here in just a second.

For now here is the first half of my isotope configuration file. I have the '.message-div' placed at the bottom of my #isotopegallery div with css applying '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');
                }
             })
        });
    });
});

Upvotes: 0

Views: 1142

Answers (1)

Christoph Pelz
Christoph Pelz

Reputation: 21

There is an easy workaround to achieve the "no result" message. Consider ".photo" as class for the itemSelector. As isotope is simply attaching ".isotope-hidden" to the div-container if it does not match the filter, the number of these divs equals the total of all isotope items in case of "no result". Easy:

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

Upvotes: 1

Related Questions