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 needWe 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 readyFirst 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