Image gallery filter using JavaScript

Image gallery filter using JavaScript

Create a file name as index.html. Copy and paste the code in created html file. then preview the file.

<!DOCTYPE html>
<html>
<title>AVI image gallery filter using javascript</title>
<style>
  body{
      background-attachment: fixed;
background-image: url("https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/12465917_1635749766699587_1279892828258216364_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=FWPa0buZEygAX_1q5tu&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=be5968c9332fa2d47d2b8a3c44f94a05&oe=5EE67B26");
background-blend-mode:luminosity;
background-repeat: no-repeat;
  background-size: cover;
  position: relative;

}
.mainavi{
    margin: 0 auto;
    padding: 40px;
  }
  .mainavi h2{
    background: #612c0db8;
    padding: 10px;
    font-size: 20px;
    color: #fff;
    font-family: cursive;
  }
  
.filterDiv {
  float: left;
  /*background-color: #2196F3;*/
  color: #ffffff;
  width: 300px;
  height: 300px;
  line-height: 100px;
  text-align: center;
  margin: 2px;
  display: none;
}
.filterDiv img{
  margin: 0 auto;
  text-align: center;
  width: 100%;
}

.show {
  display: block;
}

.container {
  margin-top: 20px;
  overflow: hidden;
}

/* Style the buttons */
.btn {
  border: 2px solid #eee;
    border-radius: 10px;
    outline: none;
    padding: 14px 80px;
    background-color: #f1f1f121;
    cursor: pointer;
    color: #fff;
}

.btn:hover {
  background-color: #2196f3;
    border: 1px solid #2196f3;
}

.btn.active {
  background: #2196f3;
    color: #fff;
    border: 2px solid #2196f3;
    border-radius: 10px;
}
</style>
<body>
      
      <div class="mainavi">
      <h2>My Image Gallery</h2>

<div id="myBtnContainer">
        <button class="btn active" onclick="filterSelection('all')"> Show all</button>
        <button class="btn" onclick="filterSelection('FUN')"> FUN</button>
        <button class="btn" onclick="filterSelection('Places')"> Places</button>
        <button class="btn" onclick="filterSelection('Nature')"> Nature</button>
        <button class="btn" onclick="filterSelection('Wild life')"> Wild life</button>
      </div>

<div class="container">
        <div class="filterDiv FUN"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84744579_2501963016744920_6711700781633896448_o.jpg?_nc_cat=100&_nc_sid=e007fa&_nc_ohc=MJDryws8klIAX9KMBJd&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=89fcd0b82d7ffffc7fb1c77fd2fd8202&oe=5EE6FABB" alt="Avi"></div>
        <div class="filterDiv FUN"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84189353_2501962690078286_4841710637006454784_o.jpg?_nc_cat=106&_nc_sid=e007fa&_nc_ohc=SfJorVpy3oIAX-zfnjH&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=6da03e0a7350ff48e5c02eee65d0a548&oe=5EE74D6B" alt="Avi"></div>
        <div class="filterDiv FUN"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84728871_2501960950078460_1913235916927795200_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=1uwHSb35qTUAX-1u-7n&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=c9312c47f5cb27c25a05eb3969c53d0c&oe=5EE6BA58" alt="Avi"></div>
        <div class="filterDiv FUN"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/84636477_2501959586745263_5994770310711214080_o.jpg?_nc_cat=111&_nc_sid=e007fa&_nc_ohc=ijb1hZVZWl8AX-n7o0M&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=e7bd3026b3cd65eeb96819394380f11b&oe=5EE58E32" alt="Avi"></div>
        <div class="filterDiv FUN"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84718534_2501961030078452_392035273225011200_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=rK3djndwqCMAX_oncnY&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=86b63711d1939a01d211aa58bd84f9b1&oe=5EE49FE3" alt="Avi"></div>
        <div class="filterDiv FUN"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84336341_2501963160078239_4984525717006974976_o.jpg?_nc_cat=106&_nc_sid=e007fa&_nc_ohc=P6Ii4purUqMAX9ZCMuM&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=edb35572825e44f7b0af5de5ec338a21&oe=5EE42150" alt="Avi"></div>

<div class="filterDiv Places"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84712951_2501958780078677_8908580560742383616_o.jpg?_nc_cat=106&_nc_sid=e007fa&_nc_ohc=oiVLaZ4xRMIAX9yIUHl&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=df64d97ddea6cd70f8d266961f19a519&oe=5EE38E00" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/84291684_2501958746745347_7034156227454042112_o.jpg?_nc_cat=108&_nc_sid=e007fa&_nc_ohc=KOaR2rHnlvoAX8wGnCF&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=e066011ed1eeac7972af57708203926c&oe=5EE4F0C3" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/84719245_2501959370078618_5867948958776557568_o.jpg?_nc_cat=104&_nc_sid=e007fa&_nc_ohc=K5PgP-r0SvQAX9EAW2W&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=d1640bb6dbe4e4a0c4f7bfbf0c9170f8&oe=5EE5B17C" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84707515_2501959420078613_1670956133155602432_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=eAGM31bIp_IAX-oUULT&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=ae32eabf7585207e53d52f4d05685aff&oe=5EE4BD70" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/83311550_2501960476745174_4127916660440956928_o.jpg?_nc_cat=111&_nc_sid=e007fa&_nc_ohc=xmJP2A1zJwwAX_yxQpz&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=bb375430912c11ec591964a7f54583d6&oe=5EE38E2D" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84551577_2501958626745359_2107358852339990528_o.jpg?_nc_cat=100&_nc_sid=e007fa&_nc_ohc=64nHdxbLHH0AX-IUyBc&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=2bd89a260d7be7430e8a45c4266f20d7&oe=5EE4DFD9" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84698842_2501959100078645_4789881020377726976_o.jpg?_nc_cat=100&_nc_sid=e007fa&_nc_ohc=jzfF4XrzQ64AX8M7E8U&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=dc2965bd911f05a58a9c20941fa7ef42&oe=5EE5DE44" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/84583897_2501960903411798_299875333866258432_o.jpg?_nc_cat=110&_nc_sid=e007fa&_nc_ohc=RWKCvvFGvaUAX9gWEn-&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=faa5eb04481e14bf0758734fe6d229ca&oe=5EE5F765" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/84808356_2501958800078675_4477232642751725568_o.jpg?_nc_cat=101&_nc_sid=e007fa&_nc_ohc=-es16KuxO8QAX-y8Rqs&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=b3eb6a7c2bad97b41aebb3b58951a159&oe=5EE75B90" alt="Avi"></div>
        <div class="filterDiv Places"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84838485_2501959720078583_7914970577239015424_o.jpg?_nc_cat=103&_nc_sid=e007fa&_nc_ohc=ebIMb0VAK_oAX8S_sm-&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=6e29532240e44c21e07ca99a7a684258&oe=5EE5834C" alt="Avi"></div>

<div class="filterDiv Nature"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/83764874_2501959676745254_89841851019821056_o.jpg?_nc_cat=111&_nc_sid=e007fa&_nc_ohc=CXFrhqhqpFgAX-lW3Np&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=72ee853577427756719c5142e6ca3548&oe=5EE624DA" alt="Avi"></div>
        <div class="filterDiv Nature"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/84357721_2501962273411661_1012249067826184192_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=1j7EgizkUZIAX8rX3Fo&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=4b39bcd059055670315b0cc7f041f34f&oe=5EE7776E" alt="Avi"></div>
        <div class="filterDiv Nature"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/83775204_2501962076745014_115481268178649088_o.jpg?_nc_cat=104&_nc_sid=e007fa&_nc_ohc=mqHntQ6Yr5sAX-xcZ32&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=19751d0e3aaae97ed146817d928c9ba2&oe=5EE5F20F" alt="Avi"></div>
        <div class="filterDiv Nature"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t1.0-9/p720x720/83791323_2501962536744968_9111800090858618880_o.jpg?_nc_cat=103&_nc_sid=e007fa&_nc_ohc=_cJkW2a635MAX_kOQro&_nc_ht=scontent.fblr1-3.fna&_nc_tp=6&oh=e97a9d7a7e7a2c5936504bb221db546e&oe=5EE3FC5E" alt="Avi"></div>
        <div class="filterDiv Nature"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t1.0-9/p720x720/84576170_2501962730078282_1105390334197628928_o.jpg?_nc_cat=108&_nc_sid=e007fa&_nc_ohc=LnwQm-gRrlcAX_NiluY&_nc_ht=scontent.fblr1-4.fna&_nc_tp=6&oh=fa50ed191434f356c743e8dc78ec86c5&oe=5EE3D13C" alt="Avi"></div>

<div class="filterDiv Wild life"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/13662213_1717231651884731_8016762934092677184_o.jpg?_nc_cat=106&_nc_sid=e007fa&_nc_ohc=7l6MSjl_oiUAX-9w4Bt&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=a136baacee5daaa01a2e406e63cf522c&oe=5EE698D8" alt="Avi"></div>
        <div class="filterDiv Wild life"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/13735053_1717230715218158_2330506654366715643_o.jpg?_nc_cat=109&_nc_sid=e007fa&_nc_ohc=fNIxYbxvYWkAX-VSZax&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=bf5df296edaa85460fbfa079289a4bad&oe=5EE3B52B" alt="Avi"></div>
        <div class="filterDiv Wild life"><img src="https://scontent.fblr1-4.fna.fbcdn.net/v/t31.0-8/s960x960/13737642_1717230811884815_4445222144802468602_o.jpg?_nc_cat=105&_nc_sid=e007fa&_nc_ohc=dN4hGJjQYCoAX8SQjx6&_nc_ht=scontent.fblr1-4.fna&_nc_tp=7&oh=83b444d3d14d112eb7f34e7f15066fb2&oe=5EE5AE30" alt="Avi"></div>
        <div class="filterDiv Wild life"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/13731912_1717230858551477_2773074817798157095_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=ER_7TiyLRjgAX9ps2u-&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=8c9fc5b5b8a1f7b079808f761df346af&oe=5EE54499" alt="Avi"></div>
        <div class="filterDiv Wild life"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/13737614_1717231408551422_3453039188141465204_o.jpg?_nc_cat=102&_nc_sid=e007fa&_nc_ohc=jSTppec1L44AX-mmUio&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=8198815885baac655c371c6075ba2b2f&oe=5EE3D610" alt="Avi"></div>
        <div class="filterDiv Wild life"><img src="https://scontent.fblr1-3.fna.fbcdn.net/v/t31.0-8/s960x960/12000929_1606700269604537_3900025113505425778_o.jpg?_nc_cat=103&_nc_sid=e007fa&_nc_ohc=1BtyIRrGvlYAX8Vra61&_nc_ht=scontent.fblr1-3.fna&_nc_tp=7&oh=60772847c86ff8006c70a3fa8eec0ff2&oe=5EE3E542" alt="Avi"></div>

</div>
      </div>

<script>
filterSelection("all")
function filterSelection(c) {
  var x, i;
  x = document.getElementsByClassName("filterDiv");
  if (c == "all") c = "";
  for (i = 0; i < x.length; i++) {
    AviRemoveClass(x[i], "show");
    if (x[i].className.indexOf(c) > -1) AviAddClass(x[i], "show");
  }
}

function AviAddClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];}
  }
}

function AviRemoveClass(element, name) {
  var i, arr1, arr2;
  arr1 = element.className.split(" ");
  arr2 = name.split(" ");
  for (i = 0; i < arr2.length; i++) {
    while (arr1.indexOf(arr2[i]) > -1) {
      arr1.splice(arr1.indexOf(arr2[i]), 1);     
    }
  }
  element.className = arr1.join(" ");
}

// Add active class to the current button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
  btns[i].addEventListener("click", function(){
    var current = document.getElementsByClassName("active");
    current[0].className = current[0].className.replace(" active", "");
    this.className += " active";
  });
}
</script>

</body>
</html>

OUTPUT

AVI image gallery filter using javascript

My Image Gallery

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Avi

Comments