CODEWITHSUNDEEP
jquery-isotope
Lauren
Lauren

Reputation: 255

Multiple instances of Isotope on on page?

Is it possible to use Isotope more than once on a page, i.e. with different sets of filers for different sets of data?

It seems that the code requires the use of certain ids, such as "#options" that can't be changed.

What alterations to the code would I need to make to achieve this?

Upvotes: 3

Views: 3010

Answers (1)

ronnbot
ronnbot

Reputation: 21

It is possible. You just need to initialize them individually when required. E.g.:

<div class='setA'>
 <div class='itemA' data-title='xxx'>xxx</div>
 <div class='itemA' data-title='xxx'>xxx</div>
</div>
<div class='setA second'>
 <div class='itemA' data-title='xxx'>xxx</div>
 <div class='itemA' data-title='xxx'>xxx</div>
</div>
<div class='setB'>
 <div class='itemB' data-points='xxx'>xxx</div>
 <div class='itemB' data-points='xxx'>xxx</div>
</div>

<script>
$('.setA').isotope({
    itemSelector: '.itemA',
    getSortData: {
        alphabetical: function( item ) {
            return item.attr('data-title');
        }, 
        somethingelse: function( item ) {}
    }
});
$('.setB').isotope({
    itemSelector: '.itemB',
    getSortData: {
        points: function( item ) {
            return parseInt(item.attr('data-points'));
        }, 
        somethingelse: function( item ) {}
    }
});
</script>

Upvotes: 2

Related Questions