Categories

Close

Design Lunatic

Isotope Tutorial

I’m sure many of you have heard of jQuery Masonry. It “Arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason fitting stones in a wall.” Now, I’m not going to lie to you, masonry is definitely an amazing plugin. However, it is missing some functionality that would definitely not be extra, such as advanced filtering and layout modes. Isotope builds upon Masonry, and is basically an enhanced version of it with more features and functionality.

Today, I will show you how to use Isotope to create a simple design with content “boxes”, and an insanely simple navigation that filters the “boxes”.

Well, let’s get started.

HTML

We’ll have a navigation section, and a main content div which will hold the content “boxes”.

Take a look at the navigation:

<div id="nav">
	<ul>
		<li><a href="" data-filter="*">All</a></li>
		<li><a href="" data-filter=".cat1">Category 1</a></li>
		<li><a href="" data-filter=".cat2">Category 2</a></li>
		<li><a href="" data-filter=".cat3">Category 3</a></li>
	</ul>
</div>

At a first glance, it looks like a typical navigation. It is, but the links do have a “data-filter” attribute. This is what allows them to control what is displayed in the main content div. Later on, we’ll make out javascript read these values and sort the “boxes” accordingly.

Now, here’s the main content:

<div id="content">
			<div class="box cat1 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus!
				</div>
			</div>
			
			<div class="box cat1">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Ut aliquet integer sed enim ac amet nunc? Tincidunt sit, cum ridiculus, placerat cum, vut magna ridiculus ut phasellus ridiculus? Eu hac, mattis adipiscing, montes adipiscing urna montes rhoncus! Odio placerat pellentesque risus urna elit, odio phasellus, rhoncus, est ridiculus purus etiam, penatibus integer! 
				</div>
			</div>
			
			<div class="box cat2 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur?
				</div>
			</div>
			
			<div class="box cat1">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			<div class="box cat2">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			<div class="box cat2">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Nascetur? Vut amet, phasellus pulvinar et odio. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			
			<div class="box cat2 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit.
				</div>
			</div>
			
			<div class="box cat1">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
			
			<div class="box cat2 cat3">
				<h2 class="box-title">Lorem Ipsum</h2>
				<div class="box-text">
					Urna vut, eros aliquet sagittis augue? Augue adipiscing duis? Et a placerat, magna enim? Lacus sit. Nunc montes tristique purus auctor. Amet dolor? Diam cras ac quis a ut, augue massa cursus natoque cursus in sociis rhoncus, scelerisque mus ac. Pellentesque odio rhoncus, aliquet tempor? Nisi cursus lorem tincidunt penatibus eu scelerisque! Scelerisque mid rhoncus turpis eros? Nunc rhoncus in turpis, mus, nec augue, odio, mid tempor aliquam, ultricies.
				</div>
			</div>
		</div>

As you can see, the markup is really quite simple. A main content div, which holds 9 “box” divs. The “box” divs have a title and some text. Also, take a look at the classes of the boxes. Remind you of something? That’s right, our nav links’ “data-filter” attributes had the same values.

Now, before we can reorder the boxes, we have to style them.

CSS

We will give the body a nice light grey background, and we will give the boxes a white background to make them a tad more noticeable. We’ll also make the boxes a mere 280px wide, so that 3 of them can fit on an average screen with no problem.

Also, while you’re following this tutorial, don’t forget to copy-paste Eric Meyer’s awesome CSS reset into your stylesheet. It can be found right here.

body {
background: #f8f8f8;
font-family: arial;
font-size: 15px;
line-height: 28px;
}

#content {
width: 920px;
margin: 0 auto;
margin-top: 20px;
}

.box-title {
font-size: 30px;
margin-bottom: 10px;
}

.box {
color: #212121;
padding: 15px;
float: left;
margin-left: 10px;
margin-right: 10px;
width: 250px;
background: #ffffff;
border: 2px solid #787878;
margin-bottom: 20px;
}

We also want our nav to be more than just a few blue links with underlines.

#nav {
float: left;
margin-left: 20px;
margin-top: 20px;
position: fixed;
}

#nav a {
text-decoration: none;
font-size: 15px;
line-height: 25px;
color: #595959;
}

#nav a:hover {
color: #393939;
}

#nav a:active {
color: #151515;
}

Now, we can move on to the awesome javascript that will make this work. Grab a copy of isotope right here. Also, don’t forget to include jquery in your document – I can’t even count how many times I’ve banged my head against the wall because the javascript wasn’t working. (Of course, I would later realise that jQuery was missing, after which I would include it and everything would start to work).

Javascript

$(document).ready(function(){
	var $container = $('#content');
	$container.isotope({
		filter: '*',
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
	});
});

The above code sorts our “boxes”. As you can see, they are now fit together, much like a jigsaw puzzle.

Now, we have to make our nav links work.

$('#nav a').click(function(){
	var selector = $(this).attr('data-filter');
	$container.isotope({ 
		filter: selector,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false, 
		}
	});
  return false;
});

Now, step by step. When we click on a navigation link, we store the link’s “data-filter” attribute in a variable called “selector”. We then filter our content boxes using the “selector” variable. We also have a “return false” at the end so that the browser doesn’t follow the link.

If you did everything right, the links should sort the content. However, the content “boxes” don’t animate. That’s the reason this CSS exists:

.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;
}

As you can see, we give the isotope items(the “boxes”) CSS3 transition properties. Now, let me explain why we defined animation parameters in the javascript. Isotope includes Modernizr, which means that it knows when the browser supports CSS3 animations, and when it doesn’t therefore, depending on the browser, Isotope uses either javascript animation or CSS3. If you were using an old browser, than the elements would animate just fine without the above CSS.

Also, the HTML we have here won’t validate because of the “data-filter” attribute. However, you could use the title attribute instead.

<div id="nav">
	<ul>
		<li><a href="" title="*">All</a></li>
		<li><a href="" title="cat1">Category 1</a></li>
		<li><a href="" title="cat2">Category 2</a></li>
		<li><a href="" title="cat3">Category 3</a></li>
	</ul>
</div>

We would have to edit the javascript accordingly:

$('#nav a').click(function(){
	var selector1 = $(this).attr('title');
	var selector = "." + selector1;
	$container.isotope({ 
		filter: selector,
		animationOptions: {
			duration: 750,
			easing: 'linear',
			queue: false,
		}
  });
  return false;
});

As you can see, we just concatenate a dot to the beginning of the title attribute. However, the “All” link wont work. To fix this, we would have to add a simple “if..else” statement. If the text is “All”, don’t concatenate the period to the beginning. Otherwise, go ahead.

$('#nav a').click(function(){
  var selector1 = $(this).attr('title');
  var text = $(this).text();
  if(text == "All"){
  var selector = selector1;
  }
  else {
  var selector = "." + selector1;
  }
    $container.isotope({ 
	filter: selector,
	animationOptions: {
     duration: 750,
     easing: 'linear',
     queue: false,
	 
   }
  });
  return false;
});

This is much more complicated, but it does bring with it the benefit of having valid HTML.

Well, you’ve reached the end of this tutorial. Good luck and have fun!

  • Sammy

    Just what i was looking for, great tutorial. But on my search in the Internet i never found a tutorial on how to use Isotope with combination filters. Would be nice to see this Tutorial with the combination filters.

    Sincerely Sammy :)

  • TJ

    I love your site. Thank you for the tutorial. One thing I noticed that I cannot figure out is that all the boxes jump slightly left when you toggle between ALL and any other Category. Do you know why?

    Thanks,

    TJ

  • TJ

    addendum to previous comment: the boxes jump slightly when you toggle between ALL and CAT 3.

    Thanks,

    TJ

  • Design Lunatic

    TJ, Thanks for letting me know. I looked at the demo page and changed the category, but it turns out the issue is being caused by the scroll bar. When you reorder the posts, sometimes there’s enough posts to make the scroll bar appear, and sometimes, there isn’t. When the scroll bar appears, the boxes jump to the left.

  • pdonley

    This is awesome and helped me greatly. What I have works now, but it is terribly slow. Might I be doing something wrong? I should add that I have 400+ very small divs that are being manipulated – so if that’s the reason why, I guess I can understand that. :-)

    • Alexandre Smirnov

      Hello pdonley,
      Yes, chances are it’s because you have too many divs.  I would suggest maybe only showing about 50 of them on one page, and adding a “load content” button that would AJAX the other divs right onto the page.  Isotope actually works really well with infinite scroll: http://isotope.metafizzy.co/demos/infinite-scroll.html

  • pdonley

    This is awesome and helped me greatly. What I have works now, but it is terribly slow. Might I be doing something wrong? I should add that I have 400+ very small divs that are being manipulated – so if that’s the reason why, I guess I can understand that. :-)

  • Unavoidableart

    Hi, Thanks for the great tut! I have been trying to get a more basic understanding of iostope for a few days now as my coding isnt great. 

    I am currently using Adobe Muse to get my page done at first and now I want to go through code to put in isotope and be able to arrange my content. 

    I was hoping that you would be able to explain it even more simple.. such as where I should imput the above code in order to get it to work correctly. For those of us who have a basic understanding of html and CSS but want to know how to add some JQuery .

    Any way thanks again for you help! 

  • Unavoidableart

    Hi, Thanks for the great tut! I have been trying to get a more basic understanding of iostope for a few days now as my coding isnt great. 

    I am currently using Adobe Muse to get my page done at first and now I want to go through code to put in isotope and be able to arrange my content. 

    I was hoping that you would be able to explain it even more simple.. such as where I should imput the above code in order to get it to work correctly. For those of us who have a basic understanding of html and CSS but want to know how to add some JQuery .

    Any way thanks again for you help! 

  • Postbox

    Hi I am currently using Isotope and am looking everywhere for an answer. 
    http://www.bella-web.co.uk/Site2012/ this is the site I am building and needing to link the elements to other parts of the web. I am currently editing the Javascript, but its not working. Could you help? Im stuck :P  

    • Alexandre Smirnov

      Well, you could just make all of the Isotope divs into “a” tags.  Give them each a “href” value,  and so on.  Is this what you were asking?

  • Postbox

    Hi I am currently using Isotope and am looking everywhere for an answer. 
    http://www.bella-web.co.uk/Site2012/ this is the site I am building and needing to link the elements to other parts of the web. I am currently editing the Javascript, but its not working. Could you help? Im stuck :P  

    • Alexandre Smirnov

      Well, you could just make all of the Isotope divs into “a” tags.  Give them each a “href” value,  and so on.  Is this what you were asking?

  • Jay

    Great tutorial, thanks a lot. quick question, is there a way to disable “ALL” navigation and all the content divs showing on the page load. Maybe start out with .cat1 and associated content. I mean do we need all tab always. Tried few things but no luck. Please let me know if you can be of any help.ThanksJay

    • Alexandre Smirnov

      Hello Jay,
      Could you elaborate slightly?  Are you asking if there’s a way to display “.cat1″ boxes as soon as the page loads?

      • Jay

        Wow, fast reply. Thanks Alexandre.
        Yes i was hoping if there is a way not to display “ALL” navigation. For example, in the demo we see all the “content” when we load the page. What if I don’t want to show everything at first? As if the page loads with “.cat1″ already selected. I hope this explains what I am trying to achieve..Thanks again

        • Alexandre Smirnov

          Yes, you can do that.  In the “container.isotope” function, the “filter” option does that.  In this case, instead of 
          $container.isotope({
          filter: ‘*’,
          animationOptions: {     
          duration: 750,   
          easing: ‘linear’,     
          queue: false,   
          }
          });

          We would need to have 

          $container.isotope({
          filter: ‘.cat1′,
          animationOptions: {   
          duration: 750,     
          easing: ‘linear’,     
          queue: false, 
          }
          });

          Notice the “filter” option is different.  Set this to anything you want in order to filter the content.  I hope this answers your question!

          • Jay

             You are Awesome. Thanks it works great…

        • Alexandre Smirnov

          Yes, you can do that.  In the “container.isotope” function, the “filter” option does that.  In this case, instead of 
          $container.isotope({
          filter: ‘*’,
          animationOptions: {     
          duration: 750,   
          easing: ‘linear’,     
          queue: false,   
          }
          });

          We would need to have 

          $container.isotope({
          filter: ‘.cat1′,
          animationOptions: {   
          duration: 750,     
          easing: ‘linear’,     
          queue: false, 
          }
          });

          Notice the “filter” option is different.  Set this to anything you want in order to filter the content.  I hope this answers your question!

          • Jay

             You are Awesome. Thanks it works great…

  • Jay

    Great tutorial, thanks a lot. quick question, is there a way to disable “ALL” navigation and all the content divs showing on the page load. Maybe start out with .cat1 and associated content. I mean do we need all tab always. Tried few things but no luck. Please let me know if you can be of any help.ThanksJay

    • Alexandre Smirnov

      Hello Jay,
      Could you elaborate slightly?  Are you asking if there’s a way to display “.cat1″ boxes as soon as the page loads?

  • Tomaz Bojc

    Hi, thanks for this tutorial. It was very useful to me. One question though, since I’m not jQuery savvy person… How do you add class on clicked category link?

    • Alexandre Smirnov

      Hello Tomaz,
      Could you elaborate a bit?

      • Zikuic

        I think what Tomaz means is one a link is clicked how do you highlight the filter link corresponding to the category?

        So say I’ve got a category green. Once I click on the link to show me the category, how do I highlight that link? Sort of like a nav bar where you highlight the active category…

        Hope that makes sense. I’m actually wondering how to do this myself — So any pointers would be great. Hahaha.

        Regards.

        • Zikuic

          Another thing…

          Do you know how I could possibly use these CSS easing functions for the CSS aninamtions. I’m using the “best-available” animation method with the isotope plugin. 

          I came across this site that has some timing functions that approximate the jquery easing functions. ( http://matthewlein.com/ceaser/ ).

          It would be great to get this to work. So elegant…

          Best

          • Alexandre Smirnov

            Hello Zikuic,
            Yes, it is possible to make isotope work with Ceaser.  Just copy-paste the generated code into this CSS rule:

            .isotope .isotope-item {

            /* Ceaser code here */

            }

            It works perfectly with isotope.

        • Alexandre Smirnov

          Hello Zikuic,
          I’ve written a post explaining how to do this, as I’m sure you and Tomaz aren’t the only ones wondering how to do this.

          http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/ 

    • Alexandre Smirnov

      Hello Tomaz,
      Could you elaborate a bit?

      • Zikuic

        I think what Tomaz means is one a link is clicked how do you highlight the filter link corresponding to the category?

        So say I’ve got a category green. Once I click on the link to show me the category, how do I highlight that link? Sort of like a nav bar where you highlight the active category…

        Hope that makes sense. I’m actually wondering how to do this myself — So any pointers would be great. Hahaha.

        Regards.

        • Zikuic

          Another thing…

          Do you know how I could possibly use these CSS easing functions for the CSS aninamtions. I’m using the “best-available” animation method with the isotope plugin. 

          I came across this site that has some timing functions that approximate the jquery easing functions. ( http://matthewlein.com/ceaser/ ).

          It would be great to get this to work. So elegant…

          Best

          • Alexandre Smirnov

            Hello Zikuic,
            Yes, it is possible to make isotope work with Ceaser.  Just copy-paste the generated code into this CSS rule:

            .isotope .isotope-item {

            /* Ceaser code here */

            }

            It works perfectly with isotope.

        • Alexandre Smirnov

          Hello Zikuic,
          I’ve written a post explaining how to do this, as I’m sure you and Tomaz aren’t the only ones wondering how to do this.

          http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/ 

  • graham

    great tutorial! I was wondering how to add the automatic resize function so that the boxes rearrange according to the size of the browser window. Much like the same functionality of the Jquery masonry plugin, but just was not sure how to implement it with your current demo.

    • Alexandre Smirnov

      Hello Graham,
      Isotope automatically readjusts the positions of the isotoped elements if the size of their parent container is changed.  For example, if you set the width of the “#content” div to be “100%”, and resized the browser, the boxes would be repositioned.

  • graham

    great tutorial! I was wondering how to add the automatic resize function so that the boxes rearrange according to the size of the browser window. Much like the same functionality of the Jquery masonry plugin, but just was not sure how to implement it with your current demo.

    • Alexandre Smirnov

      Hello Graham,
      Isotope automatically readjusts the positions of the isotoped elements if the size of their parent container is changed.  For example, if you set the width of the “#content” div to be “100%”, and resized the browser, the boxes would be repositioned.

  • http://www.facebook.com/profile.php?id=1115177211 Andreas Schneider

    Nice tutorial :) I only have 1 problem, where my boxes only want to make 2 rows instead of 3, not sure why.

    • Alexandre Smirnov

      Hello Andreas,

      A possible problem might be that your parent container isn’t wide enough to hold the boxes.  Did you give it the right width?

    • Alexandre Smirnov

      Hello Andreas,

      A possible problem might be that your parent container isn’t wide enough to hold the boxes.  Did you give it the right width?

  • Abdullahitech

    Very helpful tutorials, Only one question how we can add active state on filter navigation ? Thanks, Abdullah Shafiq

    • Alexandre Smirnov

      Hello,
      Take a look at this: http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/
      I think it is just what you need.

      • Abdullahitech

         Work like charm, Thanks Alexandre :)

  • Abdullahitech

    Very helpful tutorials, Only one question how we can add active state on filter navigation ? Thanks, Abdullah Shafiq

    • Alexandre Smirnov

      Hello,
      Take a look at this: http://www.designlunatic.com/2012/05/a-continuation-of-the-isotope-tutorial-highlight-the-currently-active-link/
      I think it is just what you need.

      • Abdullahitech

         Work like charm, Thanks Alexandre :)

  • kara bey

    I am looking for Combo Filtering too.. No way found how i can do that. As Beginner is Isotope to complicated for me. Hope we get some reply here.

  • kara bey

    I am looking for Combo Filtering too.. No way found how i can do that. As Beginner is Isotope to complicated for me. Hope we get some reply here.

  • Noxgum

    Thanks for the tutorial… that works ;)

  • Noxgum

    Thanks for the tutorial… that works ;)

  • Noxgum

    I added that selection marker for the options from the official plugin web 

    var $optionSets = $(‘.option-set’),
              $optionLinks = $optionSets.find(‘a’);

          $optionLinks.click(function(){
            var $this = $(this);
            // don’t proceed if already selected
            if ( $this.hasClass(‘selected’) ) {
              return false;
            }
            var $optionSet = $this.parents(‘.option-set’);
            $optionSet.find(‘.selected’).removeClass(‘selected’);
            $this.addClass(‘selected’);
     
         
           
            return false;
          });

  • Noxgum

    I added that selection marker for the options from the official plugin web 

    var $optionSets = $(‘.option-set’),
              $optionLinks = $optionSets.find(‘a’);

          $optionLinks.click(function(){
            var $this = $(this);
            // don’t proceed if already selected
            if ( $this.hasClass(‘selected’) ) {
              return false;
            }
            var $optionSet = $this.parents(‘.option-set’);
            $optionSet.find(‘.selected’).removeClass(‘selected’);
            $this.addClass(‘selected’);
     
         
           
            return false;
          });

  • http://www.facebook.com/felipe.genuino Felipe Genuino

    Fiz meu site baseado em isotape e masonry,
    http://felipegenuino.com

    Gostei muito.

  • Felipe Genuino

    Fiz meu site baseado em isotape e masonry,
    http://felipegenuino.com

    Gostei muito.

  • Piou

     Hello Alexandre,thanks for the helpful tutorial. I was wondering if there is aposibility to use isotope as followed: Instead of hiding items could you pass only a class throughout combination filters? I just want all the items being showed and the filtered items being reduced opacity but without hiding them.

    • Alexandre Smirnov

      Hello Piou,

      Yes, that’s possible, but isotope isn’t necessary for that.  Here’s a way this could be done: You can have multiple links with “data-class” attributes.  Then, when one of these links is clicked, have some javascript check the value of the clicked link’s “data-class” attribute, for example “category1″.  Then, select all the elements with a class of “category1″, and animate them to have a lower opacity:

      $(‘.category1′).animate({
          opacity: 0.5,
      });

      When another link is clicked, first have all the elements animate back to opacity: 1, and then reselect the right elements and have them animate to a lower opacity.

      Hope this helps.

  • Piou

     Hello Alexandre,thanks for the helpful tutorial. I was wondering if there is aposibility to use isotope as followed: Instead of hiding items could you pass only a class throughout combination filters? I just want all the items being showed and the filtered items being reduced opacity but without hiding them.

    • Alexandre Smirnov

      Hello Piou,

      Yes, that’s possible, but isotope isn’t necessary for that.  Here’s a way this could be done: You can have multiple links with “data-class” attributes.  Then, when one of these links is clicked, have some javascript check the value of the clicked link’s “data-class” attribute, for example “category1″.  Then, select all the elements with a class of “category1″, and animate them to have a lower opacity:

      $(‘.category1′).animate({
          opacity: 0.5,
      });

      When another link is clicked, first have all the elements animate back to opacity: 1, and then reselect the right elements and have them animate to a lower opacity.

      Hope this helps.

  • Saurav Jaiswal

    Hey Alexandre

    Thanks a lot brother, the tutorial is amazing it really helped i sincerely wanted to thank you for it.
    and one more request from my side, if its possible for you can you send me the links to other tutorials that you have done for isotopes
    Thanks in advance it would really help me a lot

  • Saurav Jaiswal

    Hey Alexandre

    Thanks a lot brother, the tutorial is amazing it really helped i sincerely wanted to thank you for it.
    and one more request from my side, if its possible for you can you send me the links to other tutorials that you have done for isotopes
    Thanks in advance it would really help me a lot

  • Shaii Ong

    Thank you so much for this tutorial!

    Before I found this, I was previously using isotope demo pages as a base template. Had no idea what was absolutely essential and what wasn’t.

    Wonderfully easy to follow. :D

    • Alexandre Smirnov

      Hello Shaii,

      I’m glad to hear that :)  Check out the rest of the site, I have a few other tutorials about Isotope.

  • Shaii Ong

    Thank you so much for this tutorial!

    Before I found this, I was previously using isotope demo pages as a base template. Had no idea what was absolutely essential and what wasn’t.

    Wonderfully easy to follow. :D

    • Alexandre Smirnov

      Hello Shaii,

      I’m glad to hear that :)  Check out the rest of the site, I have a few other tutorials about Isotope.

  • http://www.facebook.com/engdbest Anton Micallef

  • http://www.facebook.com/engdbest Anton Micallef

  • http://www.facebook.com/engdbest Anton Micallef

    Hey man, I was trying this out and have spent hours trying to get my custom html code to work but to now avail. I then decided to copy and paste your code, still nothing :/ Animations/selections does not work either.

    the following is the result I’m getting for both tries.
    http://imghero.com/USERIMAGES/IMAGE/e6443f9a-3806-4523-a24b-a1f1eb30a1a2.png

    The best result I had was when I tried it with title instead of  data-filter. However no images are shown unless I  zoom-in/out.

    Thanks for your help

    • Alexandre Smirnov

      Hello Anton,
      My best guess is that you don’t have a $(window).load() function wrapping around your code.  Is this true?

      • http://www.facebook.com/engdbest Anton Micallef

        I have tried that too but same result. I am currently using document ready.

  • http://www.facebook.com/engdbest Anton Micallef

    Hey man, I was trying this out and have spent hours trying to get my custom html code to work but to now avail. I then decided to copy and paste your code, still nothing :/ Animations/selections does not work either.

    the following is the result I’m getting for both tries.
    http://imghero.com/USERIMAGES/IMAGE/e6443f9a-3806-4523-a24b-a1f1eb30a1a2.png

    The best result I had was when I tried it with title instead of  data-filter. However no images are shown unless I  zoom-in/out.

    Thanks for your help

    • Alexandre Smirnov

      Hello Anton,
      My best guess is that you don’t have a $(window).load() function wrapping around your code.  Is this true?

      • http://www.facebook.com/engdbest Anton Micallef

        I have tried that too but same result. I am currently using document ready.

        edit: have managed to make it work at last. cheers and great tutorial.

  • http://twitter.com/Fabricio81RJ Fabrício Marques

    Hello
    I made a css class to add the image, and it’s an error because of the low box, sits on top of the image.When I put only the text without the image works, could tell me why?

    tks

    • Alexandre Smirnov

      Try using a window.load function instead of a document.ready function. It waits until all the resources such as images are loaded in before starting to execute the JavaScript.

      • http://twitter.com/Fabricio81RJ Fabrício Marques

        It turned out other bugs using this function, tks

    • Alexandre Smirnov

      Try using a window.load function instead of a document.ready function. It waits until all the resources such as images are loaded in before starting to execute the JavaScript.

      • http://twitter.com/Fabricio81RJ Fabrício Marques

        It turned out other bugs using this function, tks

  • Fedehiga

    is there a way to just hide items, without re-position or rearrange them?

    • Alexandre Smirnov

      For that, you don’t need to use isotope.  You can just use:

      $(“article.classname”).hide();

      Each “article” element with a class of “classname” will be hidden.

  • Fedehiga

    is there a way to just hide items, without re-position or rearrange them?

    • Alexandre Smirnov

      For that, you don’t need to use isotope.  You can just use:

      $(“article.classname”).hide();

      Each “article” element with a class of “classname” will be hidden.

  • Andre

    I can’t thank you enough!

  • Christian Müller

    Really nice tutorial, thanks alot. I am not a developer so I really love these simple solutions. This plugin is not only nice for design but can also be good for SEO und Usability purposes. SEO because whenever you “filter” something the URL remains the same. Usability, I guess thats clear.

  • 春育 马

    Great function. Thanks for posting.Welcome to my blog http://easyhealths.com

  • Pingback: Design Lunatic – Isotope infinite scroll

  • Zman

    Thanks for the great tutorial!

    Is there any way to add a search box also to your example?

    Like this:

    http://jsfiddle.net/desandro/e7cHn/3/

    But combined with your example.

    Thanks,

    Zman

  • Maris Pukitis

    Works great in FF and Chrome, but images don’t load in IE when you replace the text with image content… any ideas why?

  • vinay

    how to add active color to menu plzzzzz reply me any one there is a urgent for my project

  • Travpaint

    I Love this Tutorial!! I have it working on my local machine, however when I go to add it to wordpress, for some reason it wont work.  I have been trying to get isotope to work in wordpress for a few days now and still no luck.  If you could point me in the right direction that would be great!

    • Tim

      any luck yet?

  • Tim

    Nice tutorial dude! However my page seems to refresh when I click on the all (*) button. Any thoughts on that?

  • http://www.facebook.com/anatoliy.gorskiy.1 Anatoliy Gorskiy

    great tutorial, but there’s an extra comma after “false”

     animationOptions: {     duration: 750,     easing: ‘linear’,     queue: false,    }

  • Kelly

    Great tutorial, easy to follow. I however came a cross a little problem. When i test this on my local device it works like a charm but when i put everything on a server and test it online the isotope stops working and the filters link back to the index page instead. Anyone who had this problem or knows how to solve this?

  • question

    Thanks! I got this working, but could you please tell me how the isotope and isotope-item classes are recognized when they’re not in the html anywhere? I see that isotope-item is hardcoded in isotope.js but it doesn’t seem to be appending to the container’s children (i.e the boxes) or anything. Do you know how the magic words here?

    Thanks again.

  • Guest

    The “Download” link no longer is valid. Please correct this as the site is useless without it.

    • Alexandre Smirnov

      Thanks for notifying :) I’ve fixed the link.

  • Shahroz

    Thank You Very Much it’s Such a Great & Easy Tutorial for Beginners