How to create a gallery Image Filter using simple coding Html, CSS and JavaScript

bychandrakumar —

 How to create gallery Image Filter using simple coding


image filter


                                      This tutorial demonstrate to build an how to create gallery image filter using simple coding using html ,CSS and JavaScript. Here I am using Bootstrap to create a Data Image filter and when the Button is click image loader do the work to filter the data and show on the screen. Bootstrap is the easy to handle and simple to understand the script and components to create a website. 


Header tags:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="css/style.css">
     <link rel="stylesheet" href="assets/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="fancybox-master/fancybox-master/dist/jquery.fancybox.min.css" /> 
</head>

The fancy box is the great script and CSS use to to view full image and probably the lightbox script also and just add jQuery 3.0 script is use to work fancy box to slider or full view the image and fancy box is support for touch gestures and even supports gestures for zooming. It is perfectly suited for both mobile and desktop browsers.

 
image-filter

Body code: 

<body>
   
<section class="portfolio-section section">
<div id="container" class="container">
<div class="row">
<div class="col-lg-8 offset-lg-2 col-12">
<div class="section-title">
<span class="wow fadeInDown" data-wow-delay=".2s">Our Recent Projects</span>
<h2 class="wow fadeInUp" data-wow-delay=".4s">Dailyaspirants project Demo</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<div class="portfolio-btn-wrapper wow fadeInUp" data-wow-delay=".4s">
<button class="portfolio-btn active" data-filter="*">All</button>
<button class="portfolio-btn" data-filter=".bedroom">Bedroom</button>
<button class="portfolio-btn" data-filter=".modularkitchen">Modular Kitchen</button>
<button class="portfolio-btn" data-filter=".studytable">Study Table</button>
<button class="portfolio-btn" data-filter=".tvunit">Tv Units</button>
<button class="portfolio-btn" data-filter=".wardrobes">Wardrobes</button>
   
</div>
</div>
</div>
    

<div class="row grid">
<div class="col-lg-4 col-md-6 grid-item bedroom">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".3s">
<div class="portfolio-img">
<img src="images/bedroom/1.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Bedroom</h4>
<a href="images/bedroom/1.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item bedroom">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".3s">
<div class="portfolio-img">
<img src="images/bedroom/2.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Bedroom</h4>
<a href="images/bedroom/2.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item bedroom">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".3s">
<div class="portfolio-img">
<img src="images/bedroom/3.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Bedroom</h4>
<a href="images/bedroom/3.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item bedroom">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".3s">
<div class="portfolio-img">
<img src="images/bedroom/4.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Bedroom</h4>
<a href="images/bedroom/4.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item modularkitchen">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".4s">
<div class="portfolio-img">
<img src="images/modularkitchen/1.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Modular Kitchen</h4>
<a href="images/modularkitchen/1.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item modularkitchen">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".4s">
<div class="portfolio-img">
<img src="images/modularkitchen/2.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Modular Kitchen</h4>
<a href="images/modularkitchen/2.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item modularkitchen">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".4s">
<div class="portfolio-img">
<img src="images/modularkitchen/3.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Modular Kitchen</h4>
<a href="images/modularkitchen/3.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item modularkitchen">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".4s">
<div class="portfolio-img">
<img src="images/modularkitchen/4.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Modular Kitchen</h4>
<a href="images/modularkitchen/4.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item studytable">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".5s">
<div class="portfolio-img">
<img src="images/studytable/1.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Study Table</h4>
<a href="images/studytable/1.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item studytable">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".5s">
<div class="portfolio-img">
<img src="images/studytable/2.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Study Table</h4>
<a href="images/studytable/2.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item studytable">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".5s">
<div class="portfolio-img">
<img src="images/studytable/3.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Study Table</h4>
<a href="images/studytable/3.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item studytable">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".5s">
<div class="portfolio-img">
<img src="images/studytable/4.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Study Table</h4>
<a href="images/studytable/1.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>

<div class="col-lg-4 col-md-6 grid-item tvunit">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".6s">
<div class="portfolio-img">
<img src="images/tvunits/1.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Tv Units</h4>
<a href="images/tvunits/1.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item tvunit">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".6s">
<div class="portfolio-img">
<img src="images/tvunits/2.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Tv Units</h4>
<a href="images/tvunits/2.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item tvunit">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".6s">
<div class="portfolio-img">
<img src="images/tvunits/3.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Tv Units</h4>
<a href="images/tvunits/3.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item tvunit">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".6s">
<div class="portfolio-img">
<img src="images/tvunits/4.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Tv Units</h4>
<a href="images/tvunits/4.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item tvunit">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".6s">
<div class="portfolio-img">
<img src="images/tvunits/5.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Tv Units</h4>
<a href="images/tvunits/5.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item tvunit">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".6s">
<div class="portfolio-img">
<img src="images/tvunits/6.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Tv Units</h4>
<a href="images/tvunits/6.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item wardrobes">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".7s">
<div class="portfolio-img">
<img src="images/wardrobes/1.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Wardrobes</h4>
<a href="images/wardrobes/1.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item wardrobes">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".7s">
<div class="portfolio-img">
<img src="images/wardrobes/2.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Wardrobes</h4>
<a href="images/wardrobes/2.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item wardrobes">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".7s">
<div class="portfolio-img">
<img src="images/wardrobes/3.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Wardrobes</h4>
<a href="images/wardrobes/3.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item wardrobes">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".7s">
<div class="portfolio-img">
<img src="images/wardrobes/4.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Wardrobes</h4>
<a href="images/wardrobes/4.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 grid-item wardrobes">
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-delay=".7s">
<div class="portfolio-img">
<img src="images/wardrobes/5.jpg" alt="">
</div>
<div class="portfolio-overlay">
<div class="overlay-content">
<h4>Wardrobes</h4>
<a href="images/wardrobes/5.jpg" class="theme-btn border-btn" data-fancybox="gallery">Full View</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
image filter

                                           Here the Image loader function is used to divide the image by grid method and isotope JavaScript is used to image grid and contain within the width and height and easy to understand the method .

Add script code:

<script src="assets/js/bootstrap.min.js"></script>
<script src="js/jquery-3.3.1.min.js"></script>
 <script src="assets/js/wow.min.js"></script>
<script src="assets/js/isotope.min.js"></script>
 <script src="js/imagesloaded.min.js"></script>
 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
<script src="fancybox-master/fancybox-master/dist/jquery.fancybox.min.js"></script>


<script type="application/javascript">
    
//============== isotope masonry js with imagesloaded
            imagesLoaded( '#container', function() {
                var elem = document.querySelector('.grid');
                var isotope = new Isotope(elem, {
                    // options
                    itemSelector: '.grid-item',
                    masonry: {
                    // use outer width of grid-sizer for columnWidth
                    columnWidth: '.grid-item'
                    }
                });

                let filterButtons = document.querySelectorAll('.portfolio-btn-wrapper button');
                filterButtons.forEach(e =>
                    e.addEventListener('click', () => {

                        let filterValue = event.target.getAttribute('data-filter');
                        isotope.arrange({
                            filter: filterValue
                        });
                    })
                );
            });

</script>


CSS
html {
  scroll-behavior: smooth;
}

body {
  font-family:"Sen", sans-serif;
  /*font-family: 'Lato', sans-serif;*/
  font-weight: normal;
  font-style: normal;
  color: #5E678C;
  overflow-x: hidden;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


.section-title{top:30px;margin-left:220px; font-size:28px; font-weight:bold;color:#333;}
.section-title h2{font-size:36px;margin-left:-80px; padding-top: 30px; font-weight: bold; color:#323232; }


/*======================================

portfolio css
========================================*/
.portfolio-section.section {
	padding-bottom: 70px
}

.portfolio-section .portfolio-btn-wrapper {
	margin-bottom: 0;
	text-align: center
}

.portfolio-section .section-title {
	margin-bottom: 50px
}

.portfolio-section .portfolio-btn-wrapper button {
	padding: 10px 23px;
	font-size: 14px;
	font-weight: 500;
	border: none;
	background: #eff2f9;
	color: #051441;
	border-radius: 0;
	margin-right: 10px;
	margin-bottom: 50px;
	-webkit-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s
}

.portfolio-section .portfolio-btn-wrapper button.active {
	background: #3e54ff;
	color: #fff
}

@media only screen and (min-width:768px) and (max-width:991px) {
	.portfolio-section .portfolio-btn-wrapper button {
		margin-right: 10px;
		padding: 7px 18px;
		font-size: 16px
	}
}

@media(max-width:767px) {
	.portfolio-section .portfolio-btn-wrapper button {
		margin-right: 10px;
		padding: 7px 18px;
		font-size: 16px
	}
}

.portfolio-section .portfolio-btn-wrapper button:last-child {
	margin-right: 0
}

.portfolio-item-wrapper {
	position: relative;
	border-radius: 0;
	overflow: hidden;
	margin-bottom: 30px
}

.portfolio-item-wrapper:hover .portfolio-overlay {
	opacity: 1;
	visibility: visible;
	-webkit-transform: scale(1);
	transform: scale(1)
}

.portfolio-item-wrapper .portfolio-img img {
	width: 100%;
    height: 250px;
}

.portfolio-item-wrapper .portfolio-overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	border-radius: 0;
	background: #3e54ffe8;
	padding: 35px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	text-align: center;
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all .3s ease-out 0s;
	transition: all .3s ease-out 0s;
	-webkit-transform: scale(.9);
	transform: scale(.9)
}

@media only screen and (min-width:992px) and (max-width:1199px) {
	.portfolio-item-wrapper .portfolio-overlay {
		padding: 30px 20px
	}
}

@media only screen and (min-width:768px) and (max-width:991px) {
	.portfolio-item-wrapper .portfolio-overlay {
		padding: 30px 20px
	}
}

.portfolio-item-wrapper .portfolio-overlay .overlay-content h4 {
	color: #fff;
	margin-bottom: 20px;
	font-size: 23px;
   
}

.portfolio-item-wrapper .portfolio-overlay .overlay-content p {
	color: #fff;
	margin-bottom: 35px;
    
        
}

.portfolio-item-wrapper .portfolio-overlay .overlay-content .border-btn {
	padding: 8px 27px;
	color: #fff;
	border: 2px solid #fff;
    text-decoration: none;
    
}

.portfolio-item-wrapper .portfolio-overlay .overlay-content .border-btn:hover {
	color: #3763eb;
	background: #fff;
    
}

.single-portfolio .single-portfolio-img {
	border-radius: 0;
	overflow: hidden
}

.single-portfolio .single-portfolio-img img {
	width: 100%
}

.project-info-box ul li {
	margin-bottom: 15px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 14px
}

.project-info-box ul li:last-child {
	margin-bottom: 0
}

.project-info-box ul li .destination {
	width: 40%;
	color: #051441;
	text-transform: uppercase
}

.portfolio.single .content p {
	margin-top: 26px
}

.portfolio.single .project-sidebar .sb-project-detail {
	background: #fbfbfb;
	margin-top: 30px
}

.portfolio.single .project-sidebar .sb-project-detail .title {
	padding: 14px 20px;
	background: #3e54ff;
	color: #fff;
	margin-bottom: 0;
	font-weight: 700;
	font-size: 23px
}

.portfolio.single .project-sidebar .sb-project-detail ul {
	padding: 25px 30px
}

.portfolio.single .project-sidebar .sb-project-detail ul li {
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid rgba(54, 54, 54, .05)
}

.portfolio.single .project-sidebar .sb-project-detail ul li span {
	width: 150px;
	display: inline-block;
	color: #1c1b1b;
	font-weight: 600
}

.portfolio.single .project-sidebar .sb-project-detail ul li:last-child {
	padding: 0;
	margin: 0;
	border: none
}

.portfolio.single .gallery-wrap .gallery-item {
	border-radius: 5px;
	overflow: hidden;
	position: relative
}

.portfolio.single .gallery-wrap .gallery-item a.image-popup {
	width: 46px;
	height: 46px;
	line-height: 46px;
	border-radius: 100%;
	border: 1px solid #fff;
	text-align: center;
	position: absolute;
	content: '';
	left: 50%;
	top: 60%;
	transform: translate(-50%, -50%);
	font-size: 14px;
	color: #fff;
	opacity: 0;
	visibility: hidden;
	z-index: 1
}

.portfolio.single .gallery-wrap .gallery-item a.image-popup:hover {
	background: #106eea;
	border-color: #106eea
}

.portfolio.single .gallery-wrap .gallery-item:after {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .6);
	opacity: 0;
	visibility: hidden;
	transition: all .3s ease
}

.portfolio.single .gallery-wrap .gallery-item:hover a.image-popup {
	top: 50%;
	opacity: 1;
	visibility: visible
}

.portfolio.single .gallery-wrap .gallery-item:hover:after {
	opacity: 1;
	visibility: visible
}





/*=======================================
end portfolio css

========================================*/
image filter


I hope that you will learn how to create gallery image filter and just copy the code and past on your editor and testing code and download the code below . Keep visiting our website. Thank you and support us.
Tags:

chandrakumar

Hi, Am Chandra Kumar, I have completed my graduation in B.E computer science and Engineering. I am the founder of Dailyaspirants and I have been doing blogging and website design and development .since 2018 and 5+experience gained in this field.
Previous Post Next Post