A repository of over 1000 quality jQuery plugins

jQuery jquery-sdfilterme

jquery-sdfilterme is a jQuery Filter & Sort plugin.

Created by stevedavid

Another simple light-weight jQuery plugin to easily filter and order portfolio, articles, gallery, etc.

Not what you're looking for? Click here to view more Filter & Sort jQuery plugins


This plugin allows you to display an <ul> list with the shape of a set of boxes that would move according to your filtering needs.


  • v0.2 - 06/08/2015
  • v0.1 - 05/08/2015



  • links on boxes with data-link attribute
  • message when nothing to show in category
  • sorting option available with data-order attribute
  • callback handler for the click event


jQuery.sdFilterMe requires the latest version of jQuery.


See this JSFiddle link to see the plugin.


  • filtering and sorting options available
  • supports unlimited number of elements
  • animation and CSS customizable
  • boxes are href-able


  • HTML

First of all, you would need to make a <ul> list populated with <li> items containing a img tag (the plugin can handle different image sizes). <li> must have a class attribute to set the categories which filter applies on and can have a data-title attribute to set a title overlaying the box.

<ul id="sort-me">
    <li class="food" data-title="2" data-order="2" data-link="http://www.steve-david.com/">
        <img src="http://lorempixel.com/300/200/food/1"/>
    <li class="sports" data-title="5" data-order="5">
        <img src="http://lorempixel.com/300/200/sports/1"/>
    <li class="sports" data-title="6" data-order="6">
        <img src="http://lorempixel.com/300/200/sports/3"/>
    <li class="business" data-title="1" data-order="1">
        <img src="http://lorempixel.com/300/200/business/4"/>
    <!-- and so on -->

You then need to add the filter trigerring elements. You define them in the options you pass to the plugin and they can be whatever DOMElement you need. They must have the data-filter attribute matching the class of the <li> elements. For exemple:

<button class="sorter" data-filter="food">Food</button>
<button class="sorter" data-filter="sports">Sports</button>
<button class="sorter" data-filter="business">Business</button>
<button class="sorter" data-filter="*">All</button>

You can also add the ordering option. It works the same way and they must have the data-order set to either asc or desc.

<button class="orderer" data-order="asc">ASC</button>
<button class="orderer" data-order="desc">DESC</button>
  • jQuery

The syntax of jQuery.sdFilterMe's initialization is the following:

jQuery(function($) {

      filterSelector: '.sorter', // string: selector
      orderSelector: '.orderer', // string: selector
      duration: 1000, // integer: in ms
      animation: 'ease', // string: ease | ease-in | ease-out | linear | ease-in-out
      hoverEffect: true, // boolean
      sortedOut: 'disappear', // string: disappear | opacity
      css: { // object
          overlay: { // object
              background: { // object
                  r: 0, // integer: as in CSS
                  v: 0, // integer: as in CSS
                  b: 0 // integer: as in CSS
              duration: 250, // integer: in ms
              border: '1px solid white', // string: as in CSS
              color: 'white', // string: color
              opacity: 0.5 // float: as in CSS
          border: { // object
              width: 10, // integer: in px
              color: '#2A4153' // string: color
          margin: 10, // integer: in px
          pointer: true // boolean
      nothingToShow: {
          text: 'Nothing to show', // string: text
          color: '#ccc' // string: color
  }).on('fm.boxClicked', function(e, position, order) {
        console.log('Box position is ' + position);
        console.log('Box sort order is ' + order);



Name Type Default Description
filterSelector string '.sorter' The jQuery element that is targetting the filter elements
orderSelector string '.orderer' The jQuery element that is targetting the sorting elements
duration integer 1000 The duration in ms of the moving animation
animation string 'ease' The CSS animation to apply
hoverEffect boolean true If title provided, applies a scale(0, 0) to overlay element when hovering
sortedOut string 'disappear' Set to 'opacity' to reduce the opacity of the non-matching elements to 0.25 instead of disappearing
css object // ... The CSS properties to apply to each element


Name Parameters Description
fm.boxClicked e, position, order This event is triggered when the user clicks on a box (whether data-link is provided or not). Three parameters are given: e is the event; position is the initial position of the clicked box and order is the value of data-order.


Copyright (c) 2015 Steve David

Licensed under the MIT license.

You might also like these other Filter & Sort jQuery Plugins

  • Tabulous JS

    A jQuery tabs module for todays web!

  • Structured Filter

    jQuery UI widget for structured queries like "Contacts where Firstname starts with A and Birthday after 1/1/1980 and State in (CA, NY, FL...

  • jQuery Tablesorter Filter

    A search/filter plugin which extends the jQuery TableSorter plugin