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 Overview
Plugin: | Filtered Image Gallery |
Author: | Stanislav Andreev |
Licence: | MIT Licence |
Published: | June 9, 2019 |
Repository: | Fork on GitHub |
Dependencies: | jQuery 1.3.1 or Latest version |
File Type: | zip archive (HTML, CSS & JavaScript ) |
Package Size: | 237 KB |
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;}
Leave a Reply