About the Plugin
This feature is implemented by including the isotope javascript library (V2). For a full list of options, see the project on GitHub.
Our script simply initializes the plugin globally, allowing all animation options to be specified by data-attributes on the HTML elements.
Initializing
The demo pages already include the following code. These steps are only necessary if you are building a page from scratch. Remove these references if you are not using this plugin to improve page load times.
1. Include the library in your page
Copy the script tag below and paste in the foot of your page. Add this where you see the other library scripts. This line should be inserted after jquery.min.js and before custom.js.
<!-- Isotope (Filter & sort magical layouts) -->
<script type="text/javascript" src="plugins/isotope/isotope.pkgd.min.js"></script>
Alternatively you may wish to load this resource from a CDN to potentially improve page load times.
<!-- Isotope (Filter & sort magical layouts) -->
<script type="text/javascript" src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<!-- or -->
<script type="text/javascript" src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
Basic Usage
Isotope works on a container element with a group of similar child items.
<div class="your-class">
<div class="your-class-item">...</div>
<div class="your-class-item">...</div>
<div class="your-class-item">...</div>
</div>
Simply add class counter
to specify the desired counterUp on view.
Add the below js code
to custom.js
file inside the 📁 js folder
in case the initialized activation is not already there.
// init Isotope
var $grid = $('.your-class').isotope({
itemSelector: '.your-class-item',
layoutMode: 'masonry'
});
// filter items on button click
$('.your-button-class').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
Animations are run only once by default (on entering the viewport).
For a full list of options and built-in animations, please visit the official Isotope documentation at Zip.