jQuery Isotope - Multiple Instances on the same page

Question

I've been working with the Isotope plugin for jQuery, and I've run into some problems with our homepage which requires two isotope instances.

Both of them have different types of items and they are kept in their own containers, but when I click a filter on the second instance of isotope it attempts to filter the first instance too and not vice-versa.

What I'm asking is if it is possible to have two instances of isotope on a page without them interfering with eachother and if so, what would be the best way to get this done without problems?

Answer 1

To answer your question, yes it is possible to run two different filters on two instances of isotope. I've created an example fiddle for you to demonstrate.

Fiddle

Edit: Did some code styling and jslint stuff

Here some js:

$(function () {
    "use strict";

    //Define your containers and option sets
    var $container = [$('#container'), $('#container-new')], $optionSets = [$('#options .option-set'), $('#options-new .option-set')];

    //Initialize isotope on each container
    jQuery.each($container, function (j) {
        this.isotope({
            itemSelector : '.element'
        });
    });

    //Initialize filter links for each option set
    jQuery.each($optionSets, function (index, object) {

        var $optionLinks = object.find('a');

        $optionLinks.click(function () {
            var $this = $(this), $optionSet = $this.parents('.option-set'), options = {},
                key = $optionSet.attr('data-option-key'),
                value = $this.attr('data-option-value');
            // don't proceed if already selected
            if ($this.hasClass('selected')) {
                return false;
            }

            $optionSet.find('.selected').removeClass('selected');
            $this.addClass('selected');

            // make option object dynamically, i.e. { filter: '.my-filter-class' }

            // parse 'false' as false boolean
            value = value === 'false' ? false : value;
            options[key] = value;
            if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
              // changes in layout modes need extra logic
                changeLayoutMode($this, options);
            } else {
              // otherwise, apply new options

                $container[index].isotope(options);
            }

            return false;
        });
    });
});