Using galleries is a great way to showcase your work, show off some of your great moments, and they are cool anyway! In this easy tutorial we will see how we can implement a simple gallery with category filters.

What you will need

We will build our gallery using Bootstrap and jQuery so make sure you download these first. That’s all, let’s get started right away!

Getting the markup ready

First we will add the images on our page. We will be using the bootstrap grid system to organise them beautifully. We created a row and added the class gallery-images to it, in order to use it as our images container. After that, we created columns to hold our each of our images. I used col-sm-4 here but feel free to use what fits you best. Then we add the class gallery-img-holder to each one of them. The next step is to create the list of filters we want to use. For this tutorial I will be using places, animals, people and houses. We will also use an extra filter called all that will toggle all of our images. For the purposes of this tutorial I will be using the bootstrap pills Now that we have everything setup, it’s time we added some functionality! For each of the filters in the list we will add a custom attribute called gallery-filter. We will also add the class active to the “all” filter. Next we have to add another custom attribute to each of the image columns. We will call this one filter-category

Make it work with JavaScript

Now that our document is ready, it’s time we add some JavaScript to bring our gallery to life! We add a listener to each of the filters in our list. When any of them is clicked, our code is executed. First we remove the active class from where it was in the list and add it to the element that was clicked. Then we store the filter name of the clicked element in a variable called filter in order to use it in our control later on. At this point, we iterate through all the images in our gallery. We check if the filter that was clicked was “all”, if so, we show all images using the jQuery fadeIn function. Otherwhise, we first hide all the images in the gallery. Our next step is to check if the image we are currently iterating belongs in the category we saved in a previous step (the one stored in the filter variable). If it does, we show it. In the next part of this tutorial, we will see how we can implement a lightbox when clicking on each image of our gallery I hope you enjoyed this tutorial as much as I enjoyed writing it. Have fun experimenting and let me know bellow in the comments what you think! You can also see a working demo of the gallery we just made on GitHub
Lefteris

Lefteris

Lefteris is a frontend developer. He spends most of his day writing code in react native for our mobile applications while drinking coffee and telling bad jokes that only he laughs to. He also feels weird writing about himself in third person.

Leave a Reply

We are a software house!

A place that we gather all together to build, test and ship software for high demanding clients.

Our headquarters

Ipirou 16
Drama, 66100
Greece

T: +30 2521 105247
T: +31 (0) 20 894 6313
E: [email protected]