Responsive Filter Gallery with jQuery and CSS3

Yet another lightweight and responsive filter gallery with jQuery and CSS3. The plugin, “Filtered Image Gallery” provide responsive grid layout for images and generates image filtering tags dynamically.

This simple gallery plugin is best to show portfolio and product items with image filter. You can fully customize it with CSS according to your needs.

Plugin Preview

Share this:

How to start using jQuery?

More jQuery Top, Best and New Plugins

Top 100 jQuery Plugins

Plugin Overview

Plugin:	Filtered Image Gallery
Author:	Stanislav Andreev
Licence:	MIT Licence
Published:	10 months ago
Repository:	Fork on GitHub
Dependencies:	jQuery 1.3.1 or Latest version
File Type:	zip archive (HTML, CSS & JavaScript )
Package Size:	237 KB

Demo Download

How to Build Responsive Filter Gallery

1. Load the jQuery and Filtered Image Gallery‘s CSS and JavaScript file into your webpage to create 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 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;}