isotopeSearchFilter jQuery plugin
This is a super-light jQuery plugin that combines internal page search functionality with the Isotope plugin
Demo:
http://benrlodge.github.io/isotopeSearchFilter/
How to Use:
Load up the isotope plugin, then chain on isotopeSearchFilter().
If your sorting containers use images, I recommend David DeSandro's imagesloaded.
$(document).ready(function(){ var $container = $('.item-container') $container.isotope({ itemSelector: '.item', layoutMode: 'fitRows' }).isotopeSearchFilter(); }) // With imagesLoaded: $(document).ready(function(){ var $container = $('.item-container') imagesLoaded( '.item-container', function() { $container.isotope({ itemSelector: '.item', layoutMode: 'fitRows' }).isotopeSearchFilter(); }); }) Available Options:
isotopeSearchFilter({ itemsContainer: ".item-container", itemSelector: ".item", filtersSelector: ".filters", searchResultsClassSelector: ".active", inputSearch: '#search-term' }) Dependencies
- jQuery
- Metafizzy Isotope http://isotope.metafizzy.co/
- If your content contains images use: imagesloaded.
Related Plugins:
isotopeDropdownFilters:
https://github.com/benrlodge/isotopeDropdownFilters
This is a jQuery plugin that makes it easy to incorporate dropdowns and multi-select filtering using the Isotope plugin.
Contributions:
PRs and feature requests are welcomed. If you wish to contribute please make updates in the coffee file.
