Multiple Filter Masonry

This script extends the great DeSandro Masonry plugin by adding the ability to filter elements using multiple filters (checkbox)

Download .zip Dwnload tar.gz View on GitHub

Description

This is an extension of the great Desandro Masonry plugin that aim to filter items using checkboxes.

In the below demo we use the Twitter Bootstrap toggle buttons as a filter toolbar. Click one or more buttons and the items will be filtered on the fly. No button pressed disable any filter and all items will be displayed.

Demo


Calcolo del Pi Greco

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Letteratura

Quadratura cerchio

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Matematica   Scienza

Creare una meridiana

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Matematica

Come creare una astrolabo

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Matematica   Letteratura

Creare uno spettroscopio

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Matematica   Letteratura

Lanciare un pallone spaziale

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Matematica

Telescopio fai da te

Get things done faster. Deploy an SSD cloud server in less than 55 seconds with a dedicated IP and root access.

Matematica   Letteratura

How to use

The Javascript part is:


          // initialize Masonry
          var $container = $('#masonryContainer');

          $container.multipleFilterMasonry({
            itemSelector: '.challenge',
            filtersGroupSelector:'.filters'
          });

The filtersGroupSelector is the container into which the script search for checkboxes. For every input[type=checkbox] found, it will be attached an onclick event that will trigger the filtering. The value of checkboxes will be matched on the class of every masonry elements.

The html fiter part is:


          <div class="btn-toolbar filters">
            <div data-toggle="buttons" class="btn-group">
              <label class="btn btn-default">
                <input type="checkbox" value="Matematica" >
                Matematica
              </label>
              <label class="btn btn-default">
                <input type="checkbox" value="Scienza" >
                Scienza
              </label>
              <label class="btn btn-default">
                <input type="checkbox" value="Letteratura" >
                Letteratura
              </label>
            </div>
            <div data-toggle="buttons" class="btn-group">
              <label class="btn btn-default">
                <input type="checkbox" value="mine" >
                Mine
              </label>
            </div>
          </div>

... and the masonry items...


          <div id="masonryContainer" class="row" >
            <div class="Letteratura challenge col-lg-3 col-md-4 col-sm-6 col-xs-12 mine" >
              <h3>Calcolo del Pi Greco</h3>
            </div>
            <div class="Matematica Scienza challenge col-lg-3 col-md-4 col-sm-6 col-xs-12 mine" >
              <h3>Quadratura cerchio</h3>
            </div>

            ...

          </div>

Authors and Contributors

This script is a modified version of kevincantstop's script, masonry-filtering, and most of the work was done by him.

Many thanks for DeSandro Masonry plugin, on which my script depends.

You can follow me at @dynamick or reading my blog, Dynamick, or become a fan of my facebook page.

Support or Contact

Having trouble with Multiple Filter Masonry? Check out the documentation at this page or contact info AT dynamick it and we’ll help you sort it out.