portpolio

Portfolio Gallery with Filter and Full Responsive

Spread the love

In this blog we will show you how to create a portfolio gallery with filters and Fully Responsive.

How to Create Portfolio Gallery with Filter?

To create a Portfolio Gallery with Filters we will use JavaScript to design with the help of HTML and CSS which is shown step by step below. Mostly portfolio gallery all used to show portfolio in their own website.

Step1:- Create index.html File.

<!DOCTYPE html>
<html>
<head>
    <!-------coded by Myprograming.com---------->
  <meta charset="utf-8">
  <title>gallert filter portfolio</title>

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

</head>
<body>
<section id="gallery">
      <div class="galleryfilter">
        <h1>Portfolio Gallery Filter</h1>
        <ul class="filter-menu">
            <li data-target="all">All</li>
            <li data-target="men">MEN</li>
            <li data-target="kid">KID</li>
            <li data-target="female">FEMALE</li>
        </ul>

        <ul class="filter-item">
            <li data-item="men">
              <img src="https://www.myprograming.com/wp-content/uploads/2021/10/mr-khushal.jpg">
            </li>
            <li data-item="men">
              <img src="https://www.myprograming.com/wp-content/uploads/2021/10/khushal.jpg">
            </li>
            <li data-item="kid">
              <img src="https://www.myprograming.com/wp-content/uploads/2021/10/cute-baby-boy.jpg">
            </li>
          <li data-item="kid">
            <img src="https://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-baby-boy.jpg">
          </li>
            <li data-item="female">
              <img src="https://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-girl.jpg">
            </li>
            <li data-item="female">
              <img src="https://www.myprograming.com/wp-content/uploads/2021/10/cute-girl.jpg">
            </li>
        </ul>
      </div>
</section>
  

<script src="demo.js"></script>
</script>
</body>
</html>

Step2:- Create style.css File.


html,body{
    width: 100%;
    height: 100%;
}

body{
    font-family: sans-serif;
    font-size: 18px;
    overflow-x: hidden;
}

#gallery ul{
    list-style: none;
}

#gallery img{
    max-width: 100%;
    height: auto;
}

#gallery{
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

.galleryfilter ul{
    list-style: none;
}

.galleryfilter img{
    max-width: 100%;
    height: auto;
}

  
.filter-menu{
    margin-bottom: 20px;
}
.filter-menu li{
    display: inline-block;
    padding: 10px 18px;
    background:green;
    color: #fff;
    cursor: pointer;
}
.filter-menu li:hover,
.filter-menu li.current{
    background:yellow;
    color: #000;
    font-weight: bold;
}

.filter-item li{
    width: 50%;
    padding: 2px;
    float: left;
}

.filter-item li.active{
    width: 50%;
    padding: 2px;
    transition: all 0.5s ease;
}

.filter-item li.delete{
    width: 0%;
    padding: 0;
    transition: all 0.5s ease;
}

.filter-item img{
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (min-width: 768px){
    .filter-item li.active,
    .filter-item li{
        width: 33.33%;
    }
 
}
@media screen and (min-width: 1280px){
    .filter-item li.active,
    .filter-item li{
        width: 25%;
    }
 
}

Step3:- Create demo.js File.


let sortBtn = document.querySelector('.filter-menu').children;
let sortItem = document.querySelector('.filter-item').children;

for(let i = 0; i < sortBtn.length; i++){
    sortBtn[i].addEventListener('click', function(){
        for(let j = 0; j< sortBtn.length; j++){
            sortBtn[j].classList.remove('current');
        }

        this.classList.add('current');
        

        let targetData = this.getAttribute('data-target');

        for(let k = 0; k < sortItem.length; k++){
            sortItem[k].classList.remove('active');
            sortItem[k].classList.add('delete');

            if(sortItem[k].getAttribute('data-item') == targetData || targetData == "all"){
                sortItem[k].classList.remove('delete');
                sortItem[k].classList.add('active');
            }
        }
    });
}

Portfolio Gallery Filter Live Output:-

gallert filter portfolio

Portfolio Gallery Filter Codepen Code

See the Pen Portfolio Gallery with Filter and Full Responsive by khushal (@mr__khushal) on CodePen.


Spread the love

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *