Image gallery filter using Javascript HTML and CSS | Image gallery filter - codewithrandom

 Image gallery filter using Javascript HTML and CSS | Image gallery filter - codewithrandom

 Are you the same kind of person who gets frustrated when you try to search your favorite item from a bunch of items and still you get fail to find out?πŸ˜”


Image gallery filter using Javascript HTML and CSS | Image gallery filter - codewithrandom


Hey learners!

Here is the solution to your problem. Again welcome to our new blog with Codewithrandom. Stayed tuned with this blog till the end because today we'll explore how we can make a filterable image gallery with a brief discussion. In the end, you gonna be blown away because you will be with the new mini-project that will make you delighted as you have won over your problem.




Before discussing the procedure to make our mini-project. Let have a quick live view of our project, how it's gonna look like.



See the Pen Untitled by Ankit kumar (@Kumar-Ankit56) on CodePen.

 
What! No no... You don't need any master's degree in front-end development for this project. This blog is only for you. Just keep your hand free for scrolling down to know more in steps.😁


Note:   This is a beginner-level project. Which is coded with the help of HTML, CSS and basics of Javascript.
This is only a prerequisite for this project and if you are facing any problems with these concepts or if you want to read these for a quick review. Then feel free to check out more blogs of code with random.

Tools and technology used for this mini-project are:-
 
HTML
CSS
JAVASCRIPT(ES6) - BASICS

CODEPEN

The main task of our mini-project.

  • We have to make a simple single-page website in which we will add some images of a different kind (I chose tech stuff images.) and with buttons as many types of stuff we have, will use for filtration.

HTML SECTION.

You are reading this blog. So, I'm assuming that you must have gone through the role-play of HTML. What is this? and Why it is used?
If you don't know. Then don't be upset now. Let's have a quick intro part of HTML.

By today morning. I was just imaging building a car, not on paper one 😁 and thinking about raw materials and the process of designing. If you were at my place what do you do? You also try the same firstly you draft a sketch of the car on paper and then you bring it out on the ground level and you start screaming with joy that I have done my layout part of my car. I hope that this creative example will help you to bring a great imaginative idea about HTML

HTML does the same job of creating a skeleton system or layout for our website.

This is a simple and short explanation about HTML and if want to learn more then check out our more blogs.

By below is this written code.

Every web page has the main section:-
  1. Header(Navigation bar, logo etc.
  2. Main section (main-content).
  3. Footer.
Why I'm mentioning this firstly for giving idea and we going to work in main section part only. So, we will not have a header and footer.

I have just designed 4 buttons as we have four stuff only as a title and with strict toward our task.
 <!DOCTYPE html>  

 <html lang="en">  

 <head>  

  <title>filterable gallery</title>  

  <meta charset="utf-8">  

  <meta name="viewport" content="width=device-width, initial-scale=1">  

  <link rel="stylesheet" href="css/style.css">  

 </head>  

 <body>  

 <section class="gallery">  

      <div class="container">  

           <div class="row">  

                <div class="gallery-filter">  

                     <span class="filter-item active" data-filter="all">All</span>  

                     <span class="filter-item" data-filter="shoe">Shoe</span>  

                     <span class="filter-item" data-filter="headphone">Headphone</span>  

                     <span class="filter-item" data-filter="camera">Camera</span>  

                </div>  

           </div>  

           <div class="row">  

                <!-- gallery item start -->  

                <div class="gallery-item shoe">  

                     <div class="gallery-item-inner">  

                          <img src="https://i.postimg.cc/7PJ4yYHh/revolt-164-6w-VEHf-I-unsplash.jpg" alt="shoe">  

                     </div>  

                </div>  

                <!-- gallery item end -->  

                <!-- gallery item start -->  

                <div class="gallery-item headphone">  

                     <div class="gallery-item-inner">  

                          <img src="https://i.postimg.cc/zf7MT4q9/istockphoto-1289318271-170667a.jpg" alt="headphone">  

                     </div>  

                </div>  

                <!-- gallery item end -->  

                <!-- gallery item start -->  

                <div class="gallery-item camera">  

                     <div class="gallery-item-inner">  

                          <img src="https://i.postimg.cc/vZ7QQdMP/nordwood-themes-F3-Dde-9thd8-unsplash.jpg" alt="camera">  

                     </div>  

                </div>  

                <!-- gallery item end -->  

                <!-- gallery item start -->  

                <div class="gallery-item headphone">  

                     <div class="gallery-item-inner">  

                          <img src="https://i.postimg.cc/3xTY15HR/c-d-x-PDX-a-82obo-unsplash.jpg" alt="headphone">  

                     </div>  

                </div>  

                <!-- gallery item end -->  

                <!-- gallery item start -->  

                <div class="gallery-item camera">  

                     <div class="gallery-item-inner">  

                          <img src="https://i.postimg.cc/PrYL89TD/patrick-dozk-Vh-Dyvh-Q-unsplash.jpg" alt="camera">  

                     </div>  

                </div>  

                <!-- gallery item end -->  

                <!-- gallery item start -->  

                <div class="gallery-item headphone">  

                     <div class="gallery-item-inner">  

 <img src="https://i.postimg.cc/PqYyN2Nr/ervo-rocks-Zam8-Tv-Eg-N5o-unsplash.jpg" alt="headphone3">  

                     </div>  

                </div>  

                <!-- gallery item end -->  

           </div>  

      </div>  

 </section>  

 <script src="js/script.js"></script>  

 </body>  

 </html>
HTML CODE EXPLANATION:
Firstly as I'm working on the section part so I have created a section using div. Then after I took a container using div.
Leading the producer I have created two rows one for buttons and the second for different images.
There is no issue with images you can choose your favourite ones.
THat's done with the HTML section.
Have a look below how it looks likeπŸ‘‡ 

    eSee the Pen Untitled by Ankit kumar (@Kumar-Ankit56) on CodePen.


Let's proceed with sour imagination of car designing. So we left our work till drafting the layout of our car. But it is looking so weird without any attraction. By looking once again it seems like paying a value of garbage.πŸ˜” 

But this is where CSS comes into play and it gives a new look to our car and makes it tesela compareable😁

Learners as you have got an idea that we use CSS for designing part.

The topics that are used in this project.

  1. Flexbox.
  2. CSS basic(selector, colour border-box, etc.
  3. pseudo effect(hover, active).
  4. Media queries(responsive) and keyframe(animation).
The below code is for designing our images buttons etc.   
 body{  
      line-height: 1.5;  
      font-family: sans-serif;  
 }  
 *{  
      margin:0;  
      box-sizing: border-box;  
 }  
 .container{  
      max-width: 1170px;  
      margin:auto;  
 }  
 .row{  
      display: flex;  
      flex-wrap: wrap;  
 }  
 img{  
      max-width: 100%;  
      vertical-align: middle;  
 }  
 /*.gallery*/  
 .gallery{  
      width: 100%;  
      display: block;  
      min-height: 100vh;  
      background-colour: #2a2932;  
      padding: 100px 0;  
 }  
 .gallery .gallery-filter{  
      padding: 0 15px;  
      width: 100%;  
      text-align: centre;  
      margin-bottom: 20px;  
 }  
 .gallery .gallery-filter .filter-item{  
      colour: #ffffff;  
      font-size: 18px;  
      text-transform: uppercase;  
      display: inline-block;  
      margin:0 10px;  
      cursor: pointer;  
      border-bottom: 2px solid transparent;  
      line-height: 1.2;  
      transition: all 0.3s ease;  
 }  
 .gallery .gallery-filter .filter-item.active{  
      color: #ff9800;  
      border-color : #ff9800;  
 }  
 .gallery .gallery-item{  
      width: calc(100% / 3);  
      padding: 15px;  
 }  
 .gallery .gallery-item-inner img{  
      width: 100%;  
 }  
 .gallery .gallery-item.show{  
      animation: fadeIn 0.5s ease;  
 }  
 @keyframes fadeIn{  
      0%{  
           opacity: 0;  
      }  
      100%{  
           opacity: 1;  
      }  
 }  
 .gallery .gallery-item.hide{  
      display: none;  
 }  
 /*responsive*/  
 @media(max-width: 991px){  
      .gallery .gallery-item{  
           width: 50%;  
      }  
 }  
 @media(max-width: 767px){  
   .gallery .gallery-item{  
           width: 100%;  
      }       
      .gallery .gallery-filter .filter-item{  
           margin-bottom: 10px;  
      }  
 }  
Task we have done for designing are:
  • As our images are not in a row or the same size after adding that we target the classes of images and give them a flex property to aline in a row.
  • we have set margin and padding between images. and buttons.
  • Giving background colour to body and button as well.
  • Applying hover effect in button as changing colour on hovering.
  • At we used media query, a media query is nothing it is also a tag in CSS that help us to bring responsiveness to the website.
  • Responsiveness of the website means adjusting itself as per device size and giving a great gesture to the developer.
 Here we have done with our CSS part. This is how we have changed our rough layout website to a beautiful, attractive one. πŸ‘‡

See the Pen Untitled by Ankit kumar (@Kumar-Ankit56) on CodePen.

Hey...., wait for a second!
what are you saying that your website is not working means the filtration button is not workingπŸ€” .

This is coming because we haven't covered our website completely.
we are left with our Javascript part. The main job of our javascript in our website is that it makes our websites dynamic or alive.

If I add my car imagination part here also then what last reform we can do with our car. As our car is looking cool but it is showing a stand-alone value because it is not running. so for this, we will add engine in-car some switches for dynamic functionality. By this, we have completed our car imagination designing.

The same thing we can do with Javascript for our website.

As our main task was adding filtration(as soon as I click on the shoe button it preview only available shoes, not other stuff) in the button this can only be achieved with Javascript.

πŸ‘‡ Below code is the final code with Javascript HTML and CSS.



 <-------HTML--------->  
 <!DOCTYPE html>  
 <html lang="en">  
 <head>  
  <title>filterable gallery</title>  
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1">  
  <link rel="stylesheet" href="css/style.css">  
 </head>  
 <body>  
 <section class="gallery">  
      <div class="container">  
           <div class="row">  
                <div class="gallery-filter">  
                     <span class="filter-item active" data-filter="all">All</span>  
                     <span class="filter-item" data-filter="shoe">Shoe</span>  
                     <span class="filter-item" data-filter="headphone">Headphone</span>  
                     <span class="filter-item" data-filter="camera">Camera</span>  
                </div>  
           </div>  
           <div class="row">  
                <!-- gallery item start -->  
                <div class="gallery-item shoe">  
                     <div class="gallery-item-inner">  
                          <img src="https://i.postimg.cc/7PJ4yYHh/revolt-164-6w-VEHf-I-unsplash.jpg" alt="shoe">  
                     </div>  
                </div>  
                <!-- gallery item end -->               <!-- gallery item start -->  
  • <div class="gallery-item headphone"> <div class="gallery-item-inner"> <img src="https://i.postimg.cc/zf7MT4q9/istockphoto-1289318271-170667a.jpg" alt="headphone"> </div> </div> <!-- gallery item end --> <!-- gallery item start --> <div class="gallery-item camera"> <div class="gallery-item-inner"> <img src="https://i.postimg.cc/vZ7QQdMP/nordwood-themes-F3-Dde-9thd8-unsplash.jpg" alt="camera"> </div> </div> <!-- gallery item end --> <!-- gallery item start --> <div class="gallery-item headphone"> <div class="gallery-item-inner"> <img src="https://i.postimg.cc/3xTY15HR/c-d-x-PDX-a-82obo-unsplash.jpg" alt="headphone"> </div> </div> <!-- gallery item end --> <!-- gallery item start --> <div class="gallery-item camera"> <div class="gallery-item-inner"> <img src="https://i.postimg.cc/PrYL89TD/patrick-dozk-Vh-Dyvh-Q-unsplash.jpg" alt="camera"> </div> </div> <!-- gallery item end --> <!-- gallery item start --> <div class="gallery-item headphone"> <div class="gallery-item-inner"> <img src="https://i.postimg.cc/PqYyN2Nr/ervo-rocks-Zam8-Tv-Eg-N5o-unsplash.jpg" alt="headphone3"> </div> </div> <!-- gallery item end --> </div> </div> </section> <script src="js/script.js"></script> </body> </html> /*--------------CSS----------------*/ body{ line-height: 1.5; font-family: sans-serif; } *{ margin:0; box-sizing: border-box; } .container{ max-width: 1170px; margin:auto; } .row{ display: flex; flex-wrap: wrap; } img{ max-width: 100%; vertical-align: middle; } /*.gallery*/ .gallery{ width: 100%; display: block; min-height: 100vh; background-color: #2a2932; padding: 100px 0; } .gallery .gallery-filter{ padding: 0 15px; width: 100%; text-align: center; margin-bottom: 20px; } .gallery .gallery-filter .filter-item{ color: #ffffff; font-size: 18px; text-transform: uppercase; display: inline-block; margin:0 10px; cursor: pointer; border-bottom: 2px solid transparent; line-height: 1.2; transition: all 0.3s ease; } .gallery .gallery-filter .filter-item.active{ colour: #ff9800; border-colour: #ff9800; } .gallery .gallery-item{ width: calc(100% / 3); padding: 15px; } .gallery .gallery-item-inner img{ width: 100%; } .gallery .gallery-item.show{ animation: fadeIn 0.5s ease; } @keyframes fadeIn{ 0%{ opacity: 0; } 100%{ opacity: 1; } } .gallery .gallery-item.hide{ display: none; } /*responsive*/ @media(max-width: 991px){ .gallery .gallery-item{ width: 50%; } } @media(max-width: 767px){ .gallery .gallery-item{ width: 100%; } .gallery .gallery-filter .filter-item{ margin-bottom: 10px; } } // Javascript const filter container = document.querySelector(".gallery-filter"), galleryItems = document.querySelectorAll(".gallery-item"); filter container.addEventListener("click", (event) =>{ if(event.target.classList.contains("filter-item")){ // deactivate existing active 'filter-item' filter container.querySelector(".active").classList.remove("active"); // activate new 'filter-item' event.target.classList.add("active"); const filter value = event. target.getAttribute("data-filter"); galleryItems.forEach((item) =>{ if(item.classList.contains(filterValue) || filter value === 'all'){ item.classList.remove("hide"); item.classList.add("show"); } else{ item.classList.remove("show"); item.classList.add("hide"); } }); } });
//logic of this Javascript 
Topic knows before this Javascript code:
  • DOM(Document object model) manipulation.
  • Javascript Basics.
DOM in a simple word when we have to play with structure code of HTML, We use it. So, here also we'll use as I have sorted all the images as the same type and given to it a specific class name that I have a target each class for a specific function.

Logic  
After targeting I used simple logic whenever we click on different buttons. It will select the same button only and will preview the stuff which will come under and the rest of this it will hide.

For better understanding until you will not code by yourself. You will not get it as much.




Finally, we have completed 


By this blog... We have learned HTML, CSS, and Javascript through an example. And also peeked at the image gallery filtration, how we can design.
Now I'm looking for your reviews.
So, How was the project 😁, Learners!

I didn't focus much on the design part but it is not a restriction on you. You are free to design your image gallery filtration with more designs. 🎨 

I hope you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram 

Written by @Ankit kumar

Post a Comment

Previous Post Next Post