For images used in this tutorial visit David Hauserman and Daniel Zedda.
This technique is very common in portfolio pages where the author highlights his work using special filters. Because it's very popular and not a lot of tutorials are written in about masonry galleries at the time of writing, i have decided to write one. It is not a difficult tutorial and it has very little code compared to my other tutorials.
Beside filter buttons this tutorial features a resize button that make the images arranged in a box or spread across the entire screen and a title that will change after applying a filter.
This tutorial will only work on browsers that supports the most recent CSS3 features and this tutorial is not ready for production.
The inside of id="gallery-header" will be used to hold the resize icon, gallery title as well as the filter buttons. Because we have used classes to style the filter button and because we will need when this the user clicks on a particular button, we have to assign each button and id that describes the filter that we want to apply.
Next we have id="gallery-content" which holds id="gallery-content-center". The reason i have created two elements instead of one is because when id="gallery-content-center" is set to full screen the float will break and the images will flow over the title and filter buttons. In the code bellow i only added 3 images instead of adding all the images from the demo because i just want to explain how the different filters will be applied to different images. The number of images can be unlimited but this is not what is important here.
The way that the whole filtering system works is by assigning a class that will act as a filter for each image. It is possible to add multiple filters to each image. You can do that by assigning multiple classes to the same image. The class ".all" is present in all the images so that we can display every image when 'All' filter is activated.
CSSFirst lets set #gallery and #gallery-header to float left as well as making both elements 100% in width. For the design i we have the #gallery-header needs to be 100px in height.
We will use #gallery-header-center to center the header content. Inside this element i have added a left element #gallery-header-center-left and a right element #gallery-header-center-right.
The left element will contain the resize icon and the title. The icon element has the hover selector and besides that it doesn't have anything special.
I will finish up the CSS by creating styles for #gallery-content, #gallery-content-center and #gallery-content-center img. Because the center element of the gallery will have 2 states one when is 950px in width and another when is 100% in width, i have created 2 classes that will be appended by the time the resize button is pressed. We also want to apply transitions to to all properties of the images located inside #gallery-content-center so they will be animated when we change the filters.
When the the variable 'size' is equal to 0 we will apply .gallery-content-center-normal class to #gallery-content-center and remove the .gallery-content-center-full class. When the 'size' variable is equal to 1 we will add .gallery-content-center-full and remove .gallery-content-center-normal class. We have a total of 3 filters so the 'button' variable can be equal to either 1, 2 or 3. The '$container' variable indicates which element holds the images. We will use this element to apply the isotope script to.
This is how you apply the isotope script: you have to indicate the container in this case the '$container' variable and the elements on which you want the effect to be applied.
We will have to create 2 functions. One is 'check_button()' and the other one is 'check_size()'. We will use the code inside those functions multiple times and we don't want to recopy the code each time. My goal is to not reuse a piece of code but rather put it in a function that can be used multiple times. What 'check_button()' function does is to first remove the class indicated by the 'button_class' variable from all buttons so that we can add the highlighting class to the appropriate button. The next thing this functions does is to check what the variable 'button' is equal to and from there we only have 3 possibilities that indicates each filter used. When the one of the if statements are found to be true, this function will add the class that highlight the button indicated in 'button_class' variable and replaces the existing HTML in the title #gallery-header-center-left-title with the title of each particular filter.
'check_size()' function first removes the normal size and full size class from '#gallery-content-center' and then it checks in which state the 'size' variable is. If it's in state 0 this means the size of the content box will be 950px in width. We have to add the class that will do that. The class is represented by the 'normal_size_class' variable. We also have to change the icon to the appropriate one by replacing the content of the icon element.
The last thing to do is to instantiate the isotope script each time we resize the #gallery-content-center element so that everything is recalculated.
After creating the two functions we now have to check for clicks on any of the filter buttons as well as clicks on resize button. When one of the filter button is clicked, the isotope script needs to be set to the appropriate filter indicated by the classes inside each image. The variable 'button' will be changed to the correct number and the 'check_button()' function will be summoned.
When the resize button is clicked we have to check in which state the size button is. If it's in the 0 state we will change it to 1, if it's in 1 state we will change it to 0. After this checkup i will activate 'check_size()' function.
Let's add check_button() and check_size() functions. They will be activated each time the page is loaded.