Responsive Filter Gallery using jQuery and CSS3

Category: Gallery | December 22, 2019
Responsive Filter Gallery using jQuery and CSS3
Author: stenlidrumer
Official Page: Go to Website
Last Update:December 22, 2019
License:MIT

Yet another well-coded responsive filter gallery build with jQuery & CSS. The plugin is lightweight that helps users sort the block of images.

Furthermore, the plugin, “Sorting Image Gallery” provides a responsive grid layout for images and generates image filtering tags dynamically.

It is a simple jQuery image gallery that is perfect to showcase portfolio items or products with filter options. You can customize it by editing the CSS to make it look good.

If you have a lot of images on your webpage then its a good idea to provide a filter option to the site users. It helps them to easily find a specific set of photos.

You can also use this plugin to showcase your important work such as portfolio.

How to Create a Responsive Filter Gallery

First, you need to 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>

Next, You need to create div element with attribute id="buttons" in which filter buttons/tags will be generated dynamically.

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

After that, we will create another div attribute id="gallery" and place all of the images inside it. You simply need to define the data-tags attributes on which filter you want to show the particular image.

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

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

The plugin comes with a few basic CSS styles but you can customize them according to your design.

#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;}

 

You May Also Like

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.