Filterable Image Gallery using HTML, CSS, and jQuery || Coding Power

byCoding Power •
2



Hello everyone, you can learn how to create a Responsive Filterable Image Gallery using HTML, CSS, and jQuery in this blog. So if you want to learn then follow all the steps carefully. 

Watch Full Tutorial on YouTube


Source Code Of Responsive Filterable Image Gallery

Step 1: Create Index.html File

Create one file with the name index.html and paste the below code in this file. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Filterable Gallery by Coding Power</title>
</head>
<body>

    <div class="container">
        <h2>Filterable Gallery</h2>
        <ul>
            <li class="category active" data-filter="all">All</li>
            <li class="category" data-filter="tech">Tech</li>
            <li class="category" data-filter="headphones">Headphones</li>
            <li class="category" data-filter="camera">Camera</li>
            <li class="category" data-filter="animals">Animals</li>
            <li class="category" data-filter="birds">Birds</li>
        </ul>
        <div class="gallery">
            <div class="image tech"><img src="images/tech1.jpg" alt=""></div>
            <div class="image headphones"><img src="images/head1.jpg" alt=""></div>
            <div class="image camera"><img src="images/camera1.jpg" alt=""></div>
            <div class="image animals"><img src="images/animal1.jpg" alt=""></div>
            <div class="image birds"><img src="images/bird1.jpg" alt=""></div>

            <div class="image tech"><img src="images/tech2.jpg" alt=""></div>
            <div class="image headphones"><img src="images/head2.jpg" alt=""></div>
            <div class="image camera"><img src="images/camera2.jpg" alt=""></div>
            <div class="image animals"><img src="images/animal2.jpg" alt=""></div>
            <div class="image birds"><img src="images/bird2.jpg" alt=""></div>

            <div class="image tech"><img src="images/tech3.jpg" alt=""></div>
            <div class="image headphones"><img src="images/head3.jpg" alt=""></div>
            <div class="image camera"><img src="images/camera3.jpg" alt=""></div>
            <div class="image animals"><img src="images/animal3.jpg" alt=""></div>
            <div class="image birds"><img src="images/bird3.jpg" alt=""></div>

            <div class="image tech"><img src="images/tech4.jpg" alt=""></div>
            <div class="image headphones"><img src="images/head4.jpg" alt=""></div>
            <div class="image tech"><img src="images/tech5.jpg" alt=""></div>
        </div>
    </div>
    

    <!-- jquery cdn link -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <script>

        $(document).ready(function(){

            $('.category').click(function(){

                $(this).addClass('active').siblings().removeClass('active');

                let filter = $(this).attr('data-filter');

                if(filter == 'all'){
                    $('.image').show(500);
                }
                else{
                    $('.image').not('.'+filter).hide(400);
                    $('.image').filter('.'+filter).show(500);
                }
            });
        });

    </script>
</body>
</html>


Step 2: Create style.css File

Create one file with the name style.css and paste the below code in this file.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    background: #555;
    color: white;
}

.container h2{
    text-align: center;
    font-size: 30px;
    margin: 10px 0;
}

.container ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 15px 0;
}

.container ul .category{
    list-style: none;
    padding: 8px 15px;
    margin-right: 15px;
    margin-bottom: 10px;
    background: #333;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

.container ul .category.active{
    background: #fcf70f;
    color: black;
}

.container .gallery{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 30px;
}

.container .gallery .image{
    width: 340px;
    height: 200px;
    overflow: hidden;
    margin: 5px;
    border: 5px solid white;
}

.container .gallery .image:hover img{
    transform: scale(1.2);
}

.container .gallery .image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.4s;
}


That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after download you have to extract it.

For Download Code You have to wait 30 seconds.


Tags:

2 Comments

Previous Post Next Post