lingtalfi/ling-gallery-filter

A simple jquery plugin to filter items based on their categories.

LingGalleryFilter

2019-06-21

A simple jquery plugin to filter items based on their categories.

Demo: https://lingtalfi.com/ling-gallery-filter

How to

First create a div (or any html element) containing your items, and each item has a data-category attribute like this:

<div id="my-items">
    <div class="item" data-category="cat1">item one</div>
    <div class="item" data-category="cat1">item two</div>
    <div class="item" data-category="cat2">item three</div>
</div>

Then create another div (or any html element) containing your tags, and each tag has a data-tag attribute (corresponding to an item category), like this:

<div id="my-tags">
    <a data-tag="all" href="#">All</a>
    <a data-tag="cat1" href="#">Category one</a>
    <a data-tag="cat2" href="#">Category two</a>
</div>

Notice the "all" tag, it has a special meaning (it will display all items).

Now, just import the js file (the ling-gallery-filter.js file) after jquery, and use this js snippet:

$(document).ready(function () {
   $('#my-items').lingGalleryFilter({
            tagContainer: $('#my-tags'),
        });        
});

That's it.

History Log

• 1.0.0 -- 2019-06-21

  • initial commit