jQuery Isotope Tutorial
I love jQuery Isotope from Metafizzy. As a longtime fan of the Springfield Isotopes, who wouldn’t love an isotopes jQuery plugin? I’ve enjoyed it so much that I bought the developer license so I could use it for my own commercial applications and themes. It’s an outstanding plugin and a lot of the popular templates and themes on sites like Theme Forest use it to create things like filterable portfolios or display content in other dynamic ways.
The Isotope homepage is awesomely flashy and shows some slick implementations on how you can use the plugin. However, because there is a lot going on there on the page, I think there’s the potential that it might be a bit challenging for users who are new to jQuery to find the simplest way to use it in the code examples. There is a lot of styling and code to sift through. Perhaps, it comes down to a matter of personal preference, but I’m more of a fan of the “Start really simple and plain and then build up from there” approach. So I thought I’d show a really simple, very vanilla example of jQuery Isotope so that you can get it up and running in your own applications as soon as possible. You can add more complexity and styling from there if you so desire. The demo of what we’ll be creating and the corresponding download are below…
We’ll be creating a filterable portfolio-style implementation using jQuery Isotope.
So let’s start by downloading jQuery Istotope from GitHub. From there we can grab the .js file and include it in our project like so…
<!DOCTYPE html> <html> <head> <title>jQuery Isotope</title> <link rel="stylesheet" href="css/style.css"> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="js/jquery.isotope.js" type="text/javascript"></script> </head> <body> <script type="text/javascript"> </script> </body> </html>
Next we are going to want to add the following JavaScript to our page in-between the <script> tags in the markup…
$(window).load(function(){
var $container = $('.portfolioContainer');
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$('.portfolioFilter a').click(function(){
$('.portfolioFilter .current').removeClass('current');
$(this).addClass('current');
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
});
We’re attaching the jQuery to the $(window).load event so that Isotope can calculate widths correctly based on the image sizes. Basically, we have 2 “sections” of jQuery here. The first section is necessary for us to initialize Isotope on our page and define the container that’s in it. Then we have what will be our filter for categories and we have our click event tied to $(‘.portfolioFilter a’).
Create a folder called “css” and add a style.css file. Add the following CSS to it…
body {
font-family: Arial;
}
.portfolioFilter a {
margin-right: 10px;
color:#666;
text-decoration:none;
}
.portfolioFilter a.current {
font-weight:bold;
}
img {
margin:5px;
}
.isotope-item {
z-index: 2;
}
.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;
}
.isotope,
.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: 0.8s;
-moz-transition-duration: 0.8s;
transition-duration: 0.8s;
}
.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
transition-property: height, width;
}
.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
transition-property: transform, opacity;
}
Here we are using CSS3 transitions to make the filter effect.
Lastly of course we would not want to forget our markup. Add the following code after the opening <body> tag in the markup…
<div class="portfolioFilter">
<a href="#" data-filter="*" class="current">All Categories</a>
<a href="#" data-filter=".people">People</a>
<a href="#" data-filter=".places">Places</a>
<a href="#" data-filter=".food">Food</a>
<a href="#" data-filter=".objects">Objects</a>
</div>
<div class="portfolioContainer">
<div class="objects">
<img src="images/watch.jpg" alt="image">
</div>
<div class="people places">
<img src="images/surf.jpg" alt="image">
</div>
<div class="food">
<img src="images/burger.jpg" alt="image">
</div>
<div class="people places">
<img src="images/subway.jpg" alt="image">
</div>
<div class="places objects">
<img src="images/trees.jpg" alt="image">
</div>
<div class="people food objects">
<img src="images/coffee.jpg" alt="image">
</div>
<div class="food objects">
<img src="images/wine.jpg" alt="image">
</div>
<div class="food">
<img src="images/salad.jpg" alt="image">
</div>
</div>
The important pieces (as you can see) are in the data-filter attribute in the filter and in the classes of the container. Notice how the classes in the container match the data-filter attribute in the filter. These values need to match exactly and this is, in essence, how you categorize the objects using Isotope. If you want to put objects into a particular category, you simply need to add the classes that you want and separate them by spaces. Some objects can have one category, some have multiple categories.
Now, this might seem like an ugly unstyled package right now, but this gives you all of the basics to build off of from here. You can now add the elements to it that you need to make it fit with both your front-end framework and your theme styles. You’ll probably also want to update your category names and use your own image, but this should be a good starting point.
var $container = $('.portfolioContainer, .anotherContainer, .yetAnotherContainer');All would be controlled by the same filter in this scenario. If you wanted to have separate filters, you'd have to specify those individually.img { margin:5px; }Hope that helps!img { margin:0px; }Hope that helps!var $container = $('.portfolioContainer'); $container.isotope({ filter: '.people', animationOptions: { duration: 750, easing: 'linear', queue: false } });You'd have to change which class is current to start out with in the filter by modifying the HTML. Another option would be to trigger a click on of the filter items using jQuery trigger on the $(document).ready event.$(document).ready(function () { if(window.location.href.indexOf("scratch") > -1) { $("#scratch").trigger('click'); } else if (window.location.href.indexOf("games" > -1){ $("#games").trigger('click'); } else if (window.location.href.indexOf("apps" > -1){ $("#apps").trigger('click'); } else if (window.location.href.indexOf("other" > -1){ $("#other").trigger('click'); } });Why doesn't this work at the start of the page??? The code I am using is here: http://jsfiddle.net/GwBa8/128/ Thanks again :)img { max-width: 100%; border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; }If you scale down to portrait view you can see this take effect. Because the images are absolutely positioned, for most cases you'd want to make sure that the containerfilter: ':nth-child(-n+6)'to get the first six results...If you were to add a link with class="loadMore" after the container, you could add something like the following to append items on the click event...
var newItems = $('<div class="objects"><img src="images/watch.jpg" alt="image"></><div class="people places"><img src="images/surf.jpg" alt="image"></div>'); $('.loadMore').on('click', function(e){ $container.append(newItems).isotope('insert', newItems ); return false; });You'd probably want to pull in different items each time that click event is fired, but that would be more-or-less how you'd do it.jQuery(document).ready(function(){ var mycontainer = jQuery('#content'); mycontainer.isotope({ filter: 'none', itemSelector: '.song' });$container.isotope({filter: '.people, .places',
...