Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

suppressing categories in isotope

Hello,

I was hoping you could help me add a function to isotope for my portfolio: www.greggmrowka.com.

What i'd like to do is to suppress all of the isotope items when the page loads except for a category called "showcase". then when the user interacts with the filters, all the items sharing that category will show up.

So when the page loads, only items tagged with showcase will be visible. then when someone selects web design, all items tagged with web would show up.

User Gravatar

mrowka3d

Posted Mar 27 2014 7:46 UTC

$50


  • Assigned To NBoychev
  • Solved
  • javascript
    jquery
    isotope
  • 619 Views

6 Replies


greggmrowka.com

User Gravatar

mrowka3d

Posted Mar 27 2014 7:49 UTC

Hi mrowka3d,

You just need to add the filter option to the isotope's config:

$container.isotope({
    masonry: {
      columnWidth: 94
    },
    filter: '.showcase',
    sortBy: 'number',
    getSortData: {
      number: function( $elem ) {
        var number = $elem.hasClass('element') ? 
          $elem.find('.number').text() :
          $elem.attr('data-number');
        return parseInt( number, 10 );
      },
      alphabetical: function( $elem ) {
        var name = $elem.find('.name'),
            itemText = name.length ? name : $elem;
        return itemText.text();
      }
    }
});

And the add .showcase class to the elements that you need to show on load.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Mar 27 2014 7:55 UTC

Solution

This didn't solve your task? Get your own custom solution.

try to add this

  $("#container").isotope({ filter: ".showcase"});

before the line that starts with $(document).on('click', '.mean-nav a[data-option-value], #options .option-set a[data-option-value]', function(event){ and add .showcase to items that are showcase

User Gravatar

guyisra

Posted Mar 27 2014 7:57 UTC

Thanks for the quick turn around Nikola! I won't be able to look at this until tonight. Let me try and fix this tonight and see if I have any problems before complete this ticket.

Does this get added in the index page?

thanks!

User Gravatar

mrowka3d

Posted Mar 27 2014 8:06 UTC

Yes, this should be added in the index page. In fact you should just replace the existing isotope initialisation code.

Regards,

Nikola Boychev

User Gravatar

NBoychev

Posted Mar 27 2014 8:07 UTC

Thanks Nikola, worked perfect! And so simple :)

User Gravatar

mrowka3d

Posted Mar 27 2014 9:49 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions