This article will provide you with a straightforward but effective jQuery filtering method in an HTML gallery. Using this jQuery filter users can browse all items at once and filter displayed information based on categories like photographs and videos in the gallery.
Setting HTML Structure
In the first step set up the HTML structure to declare the document and viewport settings. The gallery itself and the breadcrumb navigation are the next two major portions of the document. Paste this code in the head section of the HTML document.
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jquery Filter</title>
<!---plugin css-->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
Create User Navigation
Users can move around the website with ease and find their current place with the breadcrumb navigation. In response to the user’s journey, it dynamically updates and presents a hierarchy of connections.
<body>
<!---main html start-->
<main>
<section class="breadcrumb_list">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div class="breadcrumbs">
<ul class="list-unstyled">
<li><a href="">Home</a></li>
<li><a href="">Happenings</a></li>
<li>Gallery</li>
</ul>
</div>
<div class="section_title">
<h1>Gallery</h1>
</div>
</div>
</div>
</div>
</section>
<section class="selectFilter my-5">
<div class="col-md-4 mx-auto d-flex align-items-center justify-content-center">
<button type="button" aria-label="Camera" class="select__BTN jsFilter" data-element="video">
<img src="images/camera-icon.svg" loading="lazy" alt="camera" width="21" height="13" />
</button>
<button type="button" aria-label="IMage" class="select__BTN jsFilter" data-element="image">
<img src="images/material-photo.svg" loading="lazy" alt="material photo" width="19" height="19" />
</button>
<button type="button" aria-label="IMage" class="select__BTN jsFilter" data-element="all">
All
</button>
</div>
</section>
</main>
<!---main html start-->
</body>Design Gallery Section Using Grid
The content grid and the filter buttons make up the two portions of the gallery. Users can browse all items or switch between the video and image categories using the filter buttons symbolized by the camera and image icons. The content grid shows things with related badges that provide further details and the type of material (picture or video).
<body>
<!---main html start-->
<main>
<section class="breadcrumb_list">
<div class="container">
<div class="row">
<div class="col-12 text-center">
<div class="breadcrumbs">
<ul class="list-unstyled">
<li><a href="">Home</a></li>
<li><a href="">Happenings</a></li>
<li>Gallery</li>
</ul>
</div>
<div class="section_title">
<h1>Gallery</h1>
</div>
</div>
</div>
</div>
</section>
<section class="selectFilter my-5">
<div class="col-md-4 mx-auto d-flex align-items-center justify-content-center">
<button type="button" aria-label="Camera" class="select__BTN jsFilter" data-element="video">
<img src="images/camera-icon.svg" loading="lazy" alt="camera" width="21" height="13" />
</button>
<button type="button" aria-label="IMage" class="select__BTN jsFilter" data-element="image">
<img src="images/material-photo.svg" loading="lazy" alt="material photo" width="19" height="19" />
</button>
<button type="button" aria-label="IMage" class="select__BTN jsFilter" data-element="all">
All
</button>
</div>
</section>
<section class="galleryListing position-relative">
<div class="container">
<div class="row gy-4" id="jsFilter">
<div class="col-lg-4 col-md-6" data-filter="video">
<a href="images/128-col.jpg" class="card rounded-0 border-0 grouped_elements1 position-relative text-decoration-none">
<img src="images/128-col.jpg" class="card-img-top rounded-0"
alt="Card Image" />
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consecte adipiscing elit.</p>
</div>
<div class="badges">
<span>10</span>
<span>
<img src="images/camera-line-icon.svg" alt="camera line icon" loading="lazy">
</span>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6" data-filter="image">
<a href="images/129-col.jpg" class="card rounded-0 border-0 grouped_elements1 position-relative text-decoration-none">
<img src="images/129-col.jpg" class="card-img-top rounded-0"
alt="Card Image" />
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consecte adipiscing elit.</p>
</div>
<div class="badges">
<span>10</span>
<span>
<img src="images/line-image-placeholder.svg" alt="image line icon" loading="lazy">
</span>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6" data-filter="image">
<a href="images/93194_col.jpg" class="card rounded-0 border-0 grouped_elements1 position-relative text-decoration-none">
<img src="images/93194_col.jpg" class="card-img-top rounded-0"
alt="Card Image" />
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consecte adipiscing elit.</p>
</div>
<div class="badges">
<span>10</span>
<span>
<img src="images/line-image-placeholder.svg" alt="image line icon" loading="lazy">
</span>
</div>
</a>
</div>
<div class="col-lg-4 col-md-6" data-filter="video">
<a href="images/93197_col.jpg" class="card rounded-0 border-0 grouped_elements1 position-relative text-decoration-none">
<img src="images/93197_col.jpg" class="card-img-top rounded-0"
alt="Card Image" />
<div class="card-body">
<p class="card-text">Lorem ipsum dolor sit amet, consecte adipiscing elit.</p>
</div>
<div class="badges">
<span>10</span>
<span>
<img src="images/camera-line-icon.svg" alt="camera line icon" loading="lazy">
</span>
</div>
</a>
</div>
</div>
</div>
</section>
</main>
<!---main html start-->
</body>Filter the Gallery with Jquery Magic
The true magic is in the JavaScript portion, where a dynamic filtering system is created using jQuery. Let’s dissect the jQuery script into its parts:
<!---plugin js-->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
//JS Filter Option
$(".jsFilter").click(function(){
var getElement = $(this).data("element");
console.log(getElement);
if(getElement == "video"){
$("#jsFilter a").each(function () {
$('[data-filter="video"]').removeClass("d-none").siblings('[data-filter="image"]').addClass("d-none");
});
}if(getElement == "image"){
$("#jsFilter a").each(function () {
$('[data-filter="image"]').removeClass("d-none").siblings('[data-filter="video"]').addClass("d-none");
});
}if(getElement == "all"){
$("#jsFilter a").each(function () {
$('[data-filter="video"]').removeClass("d-none");
$('[data-filter="image"]').removeClass("d-none");
});
}
});
</script>The jsFilter class identifies the filter buttons, and this script watches for clicks on them. It toggles the ‘d-none’ class to selectively hide or reveal items in the gallery based on which button is selected.
With the help of this jQuery filtering technique, a gallery gains an interactive layer that lets users easily explore website content according to their tastes. It demonstrates how jQuery may be used to improve user involvement in web development projects and simplify intricate interactions. Please feel free to modify and build upon this example to suit the particular requirements of your projects. Have fun with coding!
Download full HTML with Javascript click here