Responsive Filterable Photo Gallery Plugin – jquery.filterizr.js

by Posted on

Responsive Filterable Photo Gallery Plugin – jquery.filterizr.js
If you have a Photo Gallery website and your want to add quick sorting/filter/shuffle feature then In this post I am going to share awesome jQuery Plugin – jquery.filterizr.js, Which help you to apply search in your photo gallery/portfolio with CSS animation effect.Filterizr is a jQuery plugin that sorts, shuffles, searches and applies stunning filters over responsive galleries using CSS3 transitions. Write your very own, custom effects in CSS and watch your gallery come to life! Filterizr is higly customizable, with a pluggable look and feel, feature-rich and comes with preset controls. It’s filesize is around 20kb and its only dependency is jQuery. It performs well on mobile.




Use jquery.filterizr.js To create responsive filterable photo gallery

Libraries

The Plugin only dependent on jQuery so first include latest jQuery core library from CDN after that include jquery.filterizr.min.js

<script src="//code.jquery.com/jquery-latest.min.js"></script>
<script src="js/jquery.filterizr.min.js"></script>

HTML

To set up your own gallery, modify your HTML as follows:

  1. Add to your items the class filtr-item.
  2. Give your items a data-category attribute. Multiple categories must be delimited by “, “.
  3. To sort your items by custom data, include the data-sort attribute.
<div class="filtr-container">
    <div class="filtr-item" data-category="1" data-sort="value">
       <img src="img/sample.jpg" alt="sample">
    </div>
    <div class="filtr-item" data-category="2, 1" data-sort="value">
       <img src="img/sample.jpg" alt="sample">
    </div>
    <div class="filtr-item" data-category="1, 3" data-sort="value">
       <img src="img/sample.jpg" alt="sample">
    </div>
</div>

Now setting up your filter controls.

  1. Create your controls, with the markup of your preference. Style them the way you want with your CSS.
  2. Make sure to include the appropriate data attributes as below. This is what Filterizr looks for. Use the value all for an unfiltered gallery.
<ul>
   <!-- For filtering controls add -->
   <li data-filter="all"> All items </li>
   <li data-filter="1"> Category 1 </li>
   <li data-filter="2"> Category 2 </li>
   <li data-filter="3"> Category 3 </li>
   <!-- For a shuffle control add -->
   <li data-shuffle> Shuffle items </li>
   <!-- For sorting controls add -->
   <li data-sortAsc> Ascending </li>
   <li data-sortDesc> Descending </li>
</ul>
<!-- To choose the value by which you want to sort add -->
<select data-sortOrder>
   <option value="domIndex"> Position </option>
   <option value="sortData"> Custom Data </option>
</select>
<!-- Apply quick search filter -->
<input type="text" name="search" placeholder="Search..." data-search>



JS

Finally instantiate and use Filterizr in your script, Use the jQuery extension method to call the constructor.

$(function() {   
 var filterizd = $('.filtr-container').filterizr({
   //options object
 });
});

Here is the list of options to customize your photo gallery.

//Default options
options = {
   animationDuration: 0.5,
   callbacks: {
      onFilteringStart: function() { },
      onFilteringEnd: function() { },
      onShufflingStart: function() { },
      onShufflingEnd: function() { },
      onSortingStart: function() { },
      onSortingEnd: function() { }
   },
   controlsSelector: '',
   delay: 0,
   delayMode: 'progressive',
   easing: 'ease-out',
   filter: 'all',
   filterOutCss: {
      opacity: 0,
      transform: 'scale(0.5)'
   },
   filterInCss: {
      opacity: 0,
      transform: 'scale(1)'
   },
   layout: 'sameSize',
   multifilterLogicalOperator: 'or',
   selector: '.filtr-container',
   setupControls: true
}

See live demos and download source code.

DEMO | DOWNLOAD

Visit official github repository for more information and follow for future updates. Don’t forget to read license for using this plugin in your projects.



Published by admin