Isotope
In case you have not heard about Isotope earlier, then you have lost heavily as this plugin is really multifunctional. You will find blocks’ filtration, sort, and blocks’ place model. Let’s learn more about the way it works.
Filtering
The most interesting and useful function is probably filtration. It means you can choose the particular elements of a certain category from the whole set of elements. In this case, other elements just hide.
To get acquainted with this function, we will create an HTML file to which we connect two scripts: jQuery and isotope.pkgd.min.js (you can download it on the official website)
<script src = “jquery.min.js”> </ script>
<script src = “isotope.pkgd.min.js”> </ script>
<script src = “jquery.min.js”> </ script>
<script src = “isotope.pkgd.min.js”> </ script>
The HTML code will include two parts.
The first is the control buttons. They are put in a div with id=”options” and a div with id=”filters”. In the future, these IDs will be used by the script. Also, we specify data-filter attributes for the buttons that contain classes of filtered elements. Note that the first button has the default is-checked class. It means that the button is currently active.
The remaining classes (button, button-group) do not play a significant role and serve to style the layout.
<div id = “options”>
<div id = “filters” class = “button-group js-radio-button-group”>
<button class = “button is-checked” data-filter = “*”> show all </ button>
<button class = “button” data-filter = “. metal”> metal </ button>
<button class = “button” data-filter = “. transition”> transition </ button>
<button class = “button” data-filter = “. nonmetal”> nonmetal </ button>
</ div>
</ div>
<div id = “options”>
<div id = “filters” class = “button-group js-radio-button-group”>
<button class = “button is-checked” data-filter = “*”> show all </ button>
<button class = “button” data-filter = “. metal”> metal </ button>
<button class = “button” data-filter = “. transition”> transition </ button>
<button class = “button” data-filter = “. nonmetal”> nonmetal </ button>
</ div>
</ div>
The second part is the filtering blocks, leaving them the same as done by Isotope developers, in the form of periodic table elements. Each element div of the item class also has another class by which it will be filtered (respectively .nonmetal, .metal, .transition).
Now let’s call the script, specify the class .isotope as a block container (as in HTML).
var $ container = $ (‘. isotope’).
var $ container = $ (‘. isotope’).
When you click on any button, it will be assigned the is-checked class, and the selector variable will be assigned the data-filter attribute of this button. Filtering depends on the value of this variable. It is desirable to define explicitly the class of blocks in itemSelector (in the example, item). In the end, everything will look as follows:
<script>
$( document ).ready(function() {
var $container = $(‘.isotope’);
// filter buttons
$(‘#filters button’).click(function(){
var $this = $(this);
// don’t proceed if already selected
if ( !$this.hasClass(‘is-checked’) ) {
$this.parents(‘#options’).find(‘.is-checked’).removeClass(‘is-checked’);
$this.addClass(‘is-checked’);
}
var selector = $this.attr(‘data-filter’);
$container.isotope({ itemSelector: ‘.item’, filter: selector });
return false;
});
});
</script>
<script>
$( document ).ready(function() {
var $container = $(‘.isotope’);
// filter buttons
$(‘#filters button’).click(function(){
var $this = $(this);
// don’t proceed if already selected
if ( !$this.hasClass(‘is-checked’) ) {
$this.parents(‘#options’).find(‘.is-checked’).removeClass(‘is-checked’);
$this.addClass(‘is-checked’);
}
var selector = $this.attr(‘data-filter’);
$container.isotope({ itemSelector: ‘.item’, filter: selector });
return false;
});
});
</script>
Sort
Another feature of the plugin is sort. Actually, it seems to be still less demanded than filtering.Where we can use it? Well, online stores are a bright example.
To show the script functioning, periodic table elements are still good since they have many parameters by which they can be sorted. Let’s use the same HTML code of the blocks as in the case of filtering as an example. The control buttons will be changed. There will be two rows of buttons, sorting ascending (asc) and sorting descending (desc). Additionally, the data-sort-by attribute used in the script will be used instead of the data-filter attribute.
<section id=”options”>
<div class=”sort button-group asc”>
<button class=”button is-checked” data-sort-by=”original-order”>original-order (asc)</button>
<button class=”button” data-sort-by=”name”>name (asc)</button>
<button class=”button” data-sort-by=”symbol”>symbol (asc)</button>
<button class=”button” data-sort-by=”number”>number (asc)</button>
<button class=”button” data-sort-by=”weight”>weight (asc)</button>
</div>
<div class=”sort button-group desc”>
<button class=”button is-checked” data-sort-by=”original-order”>original-order (desc)</button>
<button class=”button” data-sort-by=”name”>name (desc)</button>
<button class=”button” data-sort-by=”symbol”>symbol (desc)</button>
<button class=”button” data-sort-by=”number”>number (desc)</button>
<button class=”button” data-sort-by=”weight”>weight (desc)</button>
</div>
</section>
<section id=”options”>
<div class=”sort button-group asc”>
<button class=”button is-checked” data-sort-by=”original-order”>original-order (asc)</button>
<button class=”button” data-sort-by=”name”>name (asc)</button>
<button class=”button” data-sort-by=”symbol”>symbol (asc)</button>
<button class=”button” data-sort-by=”number”>number (asc)</button>
<button class=”button” data-sort-by=”weight”>weight (asc)</button>
</div>
<div class=”sort button-group desc”>
<button class=”button is-checked” data-sort-by=”original-order”>original-order (desc)</button>
<button class=”button” data-sort-by=”name”>name (desc)</button>
<button class=”button” data-sort-by=”symbol”>symbol (desc)</button>
<button class=”button” data-sort-by=”number”>number (desc)</button>
<button class=”button” data-sort-by=”weight”>weight (desc)</button>
</div>
</section>
Initially, the script determines the value of the data-sort-by attribute of the pushed button and assigns it to the SortBy parameter (in the sortName variable). This variable is responsible for determining the elements by which they are sorted. If the button parent element has the class asc, then the sort is executed in ascending order. Otherwise, it is executed in descending order.
Isotope reads data from markup using getSortData. This parameter accepts an object with the parameters used for sorting; both functions and strings can act as their values. Let’s consider the simplest option when strings with a class will be used to get this class element contents (namely: .name, .symbol, .weight, .number).
You should not have any problems with sorting by the first two parameters, but the elements of the class .number and .weight contain numbers. Thus, in order to sort them correctly in either ascending or descending order, you will need to convert the values obtained by the script into a numeric form.
Fortunately, you do not need to do anything personally. You can simply add additional methods parseInt and parseFloat to convert the string into an integer and float number.
Here is the code for this script.
<script>
$( document ).ready(function() {
var $container = $(‘.isotope’);
// sorting
$(‘#options button’).click(function(){
// get href attribute, minus the #
var $this = $(this);
if ( !$this.hasClass(‘is-checked’) ) {
$this.parents(‘#options’).find(‘.is-checked’).removeClass(‘is-checked’);
$this.addClass(‘is-checked’);
}
sortName = $this.attr(‘data-sort-by’);
asc = $this.parents(‘.sort’).hasClass(‘asc’);
$container.isotope({
sortBy : sortName,
sortAscending : asc
});
return false;
});
$(function(){
$container.isotope({
itemSelector : ‘.item’,
getSortData : {
name: ‘.name’,
symbol : ‘.symbol’,
number : ‘.number parseInt’,
weight : ‘.weight parseFloat’
}
});
});
});
</script>
<script>
$( document ).ready(function() {
var $container = $(‘.isotope’);
// sorting
$(‘#options button’).click(function(){
// get href attribute, minus the #
var $this = $(this);
if ( !$this.hasClass(‘is-checked’) ) {
$this.parents(‘#options’).find(‘.is-checked’).removeClass(‘is-checked’);
$this.addClass(‘is-checked’);
}
sortName = $this.attr(‘data-sort-by’);
asc = $this.parents(‘.sort’).hasClass(‘asc’);
$container.isotope({
sortBy : sortName,
sortAscending : asc
});
return false;
});
$(function(){
$container.isotope({
itemSelector : ‘.item’,
getSortData : {
name: ‘.name’,
symbol : ‘.symbol’,
number : ‘.number parseInt’,
weight : ‘.weight parseFloat’
}
});
});
});
</script>
Instead of classes in getSortData, you can use special attributes. If you write the HTML code of a separate block for sort in the following way (with an attribute):
<div class=”item metal” data-symbol=”Hg”>
<p class=”number”>80</p>
<h3 class=”symbol”>Hg</h3>
<h2 class=”name”>Mercury</h2>
<p class=”weight”>200.59</p>
</div>
<div class=”item metal” data-symbol=”Hg”>
<p class=”number”>80</p>
<h3 class=”symbol”>Hg</h3>
<h2 class=”name”>Mercury</h2>
<p class=”weight”>200.59</p>
</div>
Then you can get the symbol parameter value from the data-symbol attribute in getSortData.
getSortData : {
name: ‘.name’,
symbol : ‘[data-symbol]’,
number : ‘.number parseInt’,
weight : ‘.weight parseFloat’
}
getSortData : {
name: ‘.name’,
symbol : ‘[data-symbol]’,
number : ‘.number parseInt’,
weight : ‘.weight parseFloat’
}
Placing blocks modes in Isotope
Isotope provides several principles to place the blocks. We have chosen the options that can be of any practical interest for you.
Masonry
Masonry or Stonework is a very popular model for element placing. Using this tool, the whole space is filled. This model is widely used on different website and social networks. Also, there is the same-name script masonry which places blocks in the same way.
Let’s try to understand how to run this mode. Actually, everything is pretty simple – HTML code of blocks is the same as with sorting and filtering. The only difference is that we add double width or height elements with w2 or h2 classes.
The script code in this case will be quite simple, you only need to specify the container class for the blocks (.isotope), the class of the blocks (.item), the blocks’ layout model (layoutMode: ‘masonry’). Additionally, each layout model can have its own individual parameters. So, there are the following parameters for masonry:
columnWidth — column width. In case it is not specified, Masonry will use the first element width.
gutter — horizontal distance between elements (not required).
<script>
$( document ).ready(function() {
$(‘.isotope’).isotope({
itemSelector : ‘.item’,
layoutMode: ‘masonry’,
masonry: {
columnWidth: 110,
gutter: 10
}
});
});
</script>
<script>
$( document ).ready(function() {
$(‘.isotope’).isotope({
itemSelector : ‘.item’,
layoutMode: ‘masonry’,
masonry: {
columnWidth: 110,
gutter: 10
}
});
});
</script>
Also, there is a Masonry horizontal version. Its functioning is based on placing elements in an optimal position with the available horizontal space (not vertical as in the first case). Among the required parameters, there is rowHeight which means the string vertical height. In case it is not specified, then the height of the first element will be used.
<script>
$( function() {
$(‘.isotope’).isotope({
layoutMode: ‘masonryHorizontal’,
itemSelector: ‘.item’,
masonryHorizontal: {
rowHeight: 100,
gutter: 5
}
});
});
</script>
<script>
$( function() {
$(‘.isotope’).isotope({
layoutMode: ‘masonryHorizontal’,
itemSelector: ‘.item’,
masonryHorizontal: {
rowHeight: 100,
gutter: 5
}
});
});
</script>
We cannot but mention two essential features without which Masonry Horizontal will not work:
-
You need to specify the Isotope container height in styles
-
You need to connect an additional script — masonry-horizontal.js. You can download it here.
Connect this file after jQuery and Isotope .js files.
<script src=”masonry-horizontal.js”></script>
<script src=”masonry-horizontal.js”></script>
In case something is not clear, see the examples above.
FitRows
It is an option for element positioning set by default in Isotope. Separate elements are placed in the shape of strings. The strings behave the same way as if we work with a wireframe with float elements. FitRows is a perfect option for elements with the same height.
FitRows model does not have additional parameters. In this case, HTML code remains the same (you can just remove h2 element class to prevent different heights).
To run Isotope, you need to write the following:
<script>
$( document ).ready(function() {
$(‘.isotope’).isotope({
itemSelector : ‘.item’,
layoutMode: ‘fitRows’,
});
});
</script>
<script>
$( document ).ready(function() {
$(‘.isotope’).isotope({
itemSelector : ‘.item’,
layoutMode: ‘fitRows’,
});
});
</script>
FitColumns
Here is the vertical version of fitRows. Blocks are placed as the columns. fitColumns is a perfect option for the elements that have the same width. It also has no parameters. As well as the horizontal stonework, fitColumns requires setting a height for Isotope container blocks in CSS and the additional file – fit-columns.js (download link). You need to add the tag with the script in HTML:
<script src=”fit-columns.js”></script>
<script src=”fit-columns.js”></script>
In order to run the script, you need to write the following:
<script>
$( document ).ready(function() {
$(‘.isotope’).isotope({
itemSelector : ‘.item’,
layoutMode: ‘fitColumns’,
});
});
</script>
<script>
$( document ).ready(function() {
$(‘.isotope’).isotope({
itemSelector : ‘.item’,
layoutMode: ‘fitColumns’,
});
});
</script>
imagesLoaded
In case you use Isotope for images alignment in different order, then you should bear in mind that uploading images can angle the Isotope layouts, or overlap some elements. ImagesLoaded scenario solves this problem by providing you with the Isotope running after all the child images were uploaded.
Let’s now download imagesLoaded and connect it to our HTML page:
<script src=”imagesloaded.pkgd.min.js”></script>
<script src = “images loaded.pkgd.min.js”> </ script>
Javascript
<script>
// initialize isotope after all the pictures have been loaded
var $ container = $ (‘. isotope’). imagesLoaded (function () {
$ container.isotope ({
// your parameters
});
});
</ script>
<script>
// initialize isotope after all the pictures have been loaded
var $ container = $ (‘. isotope’). imagesLoaded (function () {
$ container.isotope ({
// your parameters
});
});
</ script>