Learn how Isotope.js sorts and filters content in this video tutorial.
- [Instructor] In the previous chapter, you learned how to use isotope to create advanced layouts of item within a select container. But that's not what makes isotope special, after all, masonry layout is a custom modular you can install by itself in your site. And the other layouts are the same, you can install them without having to use isotope. What makes isotope unique is its ability to filter and sort the contents within this container and append the layouts on top of that. That's what we'll focus on this chapter, and the next one.
How to make advanced filtering and sorting functions for the contents within the container. Let's start with filtering. If you go to the isotope website and click on the first link in the main menu, filtering, you get to an example of how filtering works. Here you see a long list of items, from the period table, as well as a series of buttons. Right now, we're seeing all the items. If I click on any of these buttons, I can see that the content is being filtered to only show my selection. Now to see what's happening here, look at the console directly above these items.
Right now, with show all, isotope is set to filter asterisk, meaning, show everything. If I click on metal, that call changes to filter anything that has the class metal. And if we look at any of these items, you can see that the item itself has the three classes, elements item, post transition, and metal. What's happening here is, when I select an item that is not a metal, let's say this one, it is not a metal, it is a metaloid, and then click the metal button, this item is set to display none, it disappears, and then the other items are aligned to fit in the space that was freed up when this item was set to none.
If we keep going down this filter, you'll see there are a lot of different options here. With metal, we're simply filtering for one class. With alkali and alkaline-earth, we're filtering for two classes, alkali and alkaline-earth. For not transition, we're literally saying, not class transition. For metal but not transition, we're saying metal not transition, for number over 50, there's a custom function. And for name ends with -ium, there's also a custom function. This is what makes isotope unique.
You're allowed to pretty much define whatever filtering capability you want to, appended to the isotope filter and then you can display only the items you want as long as they are loaded into the dom in the current page you are looking at. For this chapter and the next one, we'll be working with a new example that you can find in the exercise files. It's a basic website that lists off a series of courses on web development and development in general. In the left hand side here, we have a series of filters we want to apply. So this is kind of the prototype stage.
We have an index.html file, that's the file you're looking at the in the browser, styles.css holds all the css holds all the styles, then we have the JS folder with the libs folder, and inside libs we have imagesloaded, isotope and jquery-3.1.1, just like in the previous chapter, we also have isotope settings, and right now isotopesettings is pretty much set up the same way we had it at the very end of the previous chapter. The only difference is I've defined the container as a separate variable so I can call it. So here, you see first that we say, var container it points at the courses container, which is found right down here, so the section courses holds all the articles.
Full-stack is as subject filter. Ray is the name of the author, because we want to be able to filter based on author. Front-end and skills are also subject filters. Scroll down, here we have another one, course, full-stack, simon, developer, skills and so on. If you scroll through this, you'll see that each of these articles is pretty much the same, they just provide a series of different classes that you can filter for and they're all structured like any basic html page. This is what we'll be working with through this chapter and the next one.
I urge you to go through the code right now and see exactly how this is put together so you're familiar with everything because as we're moving forward, I'm going to refer to a lot of these items, maybe point them out briefly, and having familiarity with what's going on before we get started is a really good idea.
- What is Isotope.js?
- Installing Isotope and jQuery
- Configuring layout modes
- Setting parameters
- Making layouts responsive
- Filtering and sorting
- Creating URL hashes
- Filtering and sorting with hashes
- Filtering and sorting in WordPress