49
SHARES
Animated Masonry Gallery with Filters
May 31, 2014
15 comments
70,457
In this tutorial i will teach you how to create an animated masonry gallery using Isotope, jQuery and CSS transitions. Please note that isotope is not free for commercial use, in order to be sure please check their licensing.

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.

HTML

This is part is very simple because the html in this tutorial will only have a few elements. The real magic will happen in Javascript section. Lets start with id="gallery". This will be the element that will rule them all. It will hold both id="gallery-header" and id="gallery-content".



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.

CSS

First 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.



The right element nevertheless its a little more tricky. I have decided to use class elements instead of list elements for this demo because this requires a bit less coding. The filters as i like to call them will have a normal class and a class that is appended using javascript each time one of the filters is selected. Both classes needs to have hover selectors so that the color of the background is different when the mouse is in hover position in both situations.



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.

JavaScript

Let's create some variables that will make our lives easier. The first two variables 'size' and 'button' will be used to keep track of the resize button and which filter has been applied so we can highlight the appropriate button. We will use 'button_class' to show which class will be appended to the button that is highlighted. 'normal_size_class' and 'full_size_class' are used to define the classes that will be applied to #gallery-content-center depending on which state the resize button is.

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.

49
SHARES
16
26
7
0
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
15 Comments
Helen
August 17, 2014
Hi, Great tutorial! I just have one question. When the gallery is floating left the images respond to the size of the screen but when the images are centred this doesn't happen. How do I get the gallery to be centred whilst still being responsive? Many thanks Helen
seema
September 13, 2014
hi, thanks for this masonry tutorial, though i wish to know how to make this responsive?? thanks,
Robert Popa
September 13, 2014
Hello, This tutorial it actually has some sort of responsiveness. You need to press the resize button in order to make it full screen and responsive. Thanks, Robert
Robert Popa
September 13, 2014
Hello Helen, Unfortunately due to the way isotope plugin works you wont be able to center the images. The only workaround i see is to make the images smaller so you wont have that empty space in the right. Thanks, Robert
Tanmoy Roy
January 13, 2015
Hi, This is really a great and super simple and straight forward tutorial.I couldn't a single tutorial on isotop gallery this much easy. Thanks a lot for the tutorial But i don't want a gallery page instead i want small window box (may be with vertical scroll bar) inside my website where i can put this whole gallery. i couldn't short it out how. Can you please help me out i'm really a newbie in web designing. I rarely know how to code :( all i learnt' from rnd and website source code. Please help
Robert Popa
January 13, 2015
I will reply to you in an email. Thanks, Robert
oskar
March 2, 2015
Hi! Great Plugin! I'm using it for making a portfolio, but i have a problem i can't solve. I have a lot of categories and a total of 400 thumbs that have to load. The plugin don't reacts until all the images are loaded. I wonder if i could only load the images of the selected filter when the page is loading and not all of them. Thank you and sorry for my bad english.
Robert Popa
March 2, 2015
Hello, You can try loading only the specific filtered images with Ajax but i won't recommend this method since it will take some type for images to be loaded when you press a filter button. What i suggest you do is put a page loaded so that it will show a spinner until the images are loaded and then show the images. Thanks, Robert
Yuri
April 24, 2015
Hi! Gallery works great! I optimized it for my needs and its great....BUT one strange thing. Hover effects for dont work! I'm trying to transform: scale(1.2) pictures when hover, but it doesnt work. Can someone tell me why?? When I disable masonry script, everything is ok.
Robert Popa
April 24, 2015
It looks like the transform property is interacting with the isotope plugin. You should try #gallery-content-center img:hover{opacity: 0.5;}
Yuri
June 1, 2015
Hi again and sorry for my English)) I have one more question about responsiveness. I need to be clickable so i put img into and change $container.isotope({itemSelector : 'a'}); Then I wish every to be 33% width of the container (or browser's window ). And then i set img width to 100% of its container . But Isotope overwhelming this responsive setings! May be you know how to make images fully responsive?? You can see my project here: http://gnaf-58.hosting.parking.ru/Blackdot/#article3 You can resize window to understand my problem! And then if , if you reload page or choose filter - everything become OK, isotope "reLayout" elements according to 33% width!
Marko
August 22, 2015
This is a fantastic plugin however I'm trying to use this with, but there seems to be some incompatibility with the CSS which I can't for the life of me find.. http://brutaldesign.github.io/swipebox/#download This would be even better if you could click an image and then swipe full screen images (especially on my ipad)
Seb
October 12, 2015
Hello, I've use your Tutorial for my personal training. But I can't find the way for make a sliding box on images with clickable informations or external links. Or to call a CSS with a hover effect. Have you a tips or an explication? Thanks in advance.
Matthew Basile
February 7, 2016
This is a fantastic tutorial, thanks! However, do you have any advice on how I can make links to the page with a specific filter already select?
Clara
March 17, 2016
Hi! Thank you so much for this tutorial! I´d like to know how could I make the grid smaller. I dont want a full width gallery, instade, I need it to be about 950px width. But I cant find a way. I think it is because images are positioned absolute, but Im not sure. Thanks a lot (and sorry for my english)
Would you like to share your thoughts?
Name:*
Email:*
Website:
Message:*
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
Hot Posts
Subscribe to our newsletter
You have to confirm your email to subscribe successfully. We send our newsletter about once a week.