Responsive Filter Gallery with jQuery and CSS3

Yet another lightweight and responsive filter gallery with jQuery and CSS3. The plugin, “Filtered Image Gallery” provides a responsive grid layout for images and generates image filtering tags dynamically.
This simple gallery plugin is best to show portfolios and product items with an image filter. You can fully customize it with CSS according to your needs.

How to Build Responsive Filter Gallery

1. Load the jQuery and Filtered Image Gallery‘s CSS and JavaScript file into your webpage to create a responsive filter gallery.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<!-- Filter Gallery CSS -->
<link rel="stylesheet" href="css/style.css" />

<!-- Filter Gallery Js -->
<script src="js/filter-tags.js"></script>

2. Create div element with attribute id="buttons" in which filter buttons/tags will be generated dynamically.

<div id="buttons"></div>

3. After that, create another div with attribute id="gallery" and place your image in it.

 <div id="gallery">
      <img src="img/01.jpg" data-tags="Animators, Illustrators" alt="lemon" />
      <img src="img/02.jpg" data-tags="Photographers, Filmmakers" alt="car" />
      <img src="img/03.jpg" data-tags="Photographers, Filmmakers" alt="animals" />
      <img src="img/04.jpg" data-tags="Designers" alt="sites" />
      <img src="img/05.jpg" data-tags="Photographers, Filmmakers" alt="team music" /> 
      <img src="img/06.jpg" data-tags="Designers, Illustrators" alt="flowers" />
      <img src="img/07.jpg" data-tags="Photographers" alt="nature" />
      <img src="img/08.jpg" data-tags="Designers" alt="laguna" />   
      <img src="img/09.jpg" data-tags="Animators, Illustrators" alt="design" />
    </div>

Tip: Pass data-tags attribute to each image to sort the image. You can use multiple values. i.e data-tags="Photographers, Filmmakers"

4. The basic CSS styles for gallery layout.

#buttons{
	text-align: center;
	margin: 20px 0;}

button {
	background-color: #f2f2f2;
	border: 1px solid #ccc;
	padding: 3px 10px 4px 10px;
	margin: 0 1px;
	border-radius: 4px;
	color: #333;
	font-family: 'Karla', sans-serif;
	font-size: 100%;}

button:hover, button.active {
	background-color: #b48450;
	color: #fff;
	cursor: pointer;}

#gallery {
	text-align: center;
	max-width: 1020px;
	margin: 0 auto;}

#gallery img {
	width: 300px;
	height: 150px;
	border-radius: 3px;
	border: 8px solid #fff;
	margin: 6px;
    -webkit-box-shadow: 0 0 3px 3px #ebebeb;
    box-shadow: 0 0 3px 3px #ebebeb;
	float: left;}

That’s all! hopefully, you have successfully created a responsive filter gallery. If you have any questions or suggestions, feel free to comment below.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.