revision:
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
Lorem ipsum dolor..
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> Show all</button>
<button class="btn" onclick="filterSelection('holidays')"> Holidays</button>
<button class="btn" onclick="filterSelection('cars')"> Cars</button>
<button class="btn" onclick="filterSelection('people')"> People</button>
</div>
<!-- Portfolio Gallery Grid -->
<div class="row">
<div class="column holidays">
<div class="content">
<img src="../images/1.jpg" alt="lake" style="width:100%; height:100%;">
<h4>lake</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column holidays">
<div class="content">
<img src="../images/2.jpg" alt="beach" style="width:100%; height:100%;">
<h4>beach</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column holidays">
<div class="content">
<img src="../images/4.jpg" alt="bath" style="width:100%; height:100%;">
<h4>bath</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="../images/car1.jpg" alt="Car" style="width:100%; height:100%;">
<h4>Audi</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="../images/car3.jpg" alt="Car" style="width:100%; height:100%;">
<h4>Lamborghini</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="../images/car4.jpg" alt="Car" style="width:100%; height:100%;">
<h4>BMW</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="../images/malcom-x.jpg" alt="malcom-x" style="width:100%; height:100%;">
<h4>Malcom-x</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="../images/hemingway.jpg" alt="hemingway" style="width:100%; height:100%;">
<h4>Hemingway</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="../images/tolkien.jpg" alt="tolkien" style="width:100%; height:100%;">
<h4>Tesla</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- END GRID -->
</div>
<style>
.row {box-sizing: border-box; display: flex; flex-flow: row wrap; margin: 1vw 0vw;}
.row, .row > .column {padding: 1vw; }
.column {float: left; width: 30%; height: auto; display: none; /* Hide all elements by default */}
.row:after {content: ""; display: table; clear: both;} */
.content {background-color: white; padding: 1vw;}
/* The "show" class is added to the filtered elements */
.show {display: block;}
/* Style the buttons */
.btn {border: none; outline: none; padding: 12px 16px; background-color: white; cursor: pointer;}
.btn:hover { background-color: #ddd;}
.btn.active {background-color: #666; color: white;}
</style>
<script>
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
function w3AddClass(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 w3RemoveClass(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>
<div class="containerA">
<div>
<ul class="filter-menu">
<li data-target="all">All</li>
<li data-target="male">Male</li>
<li data-target="female">Female</li>
<li data-target="car">Car</li>
</ul>
</div>
<div>
<ul class="filter-items">
<li data-item="male"><img src="../images/einstein.jpg" alt=""/></li>
<li data-item="male"><img src="../images/tesla.jpg" alt=""/></li>
<li data-item="female"><img src="../images/4a.jpg" alt=""/></li>
<li data-item="female"><img src="../images/cartoon.jpg" alt=""/></li>
<li data-item="car"><img src="../images/car1.jpg" alt=""/></li>
<li data-item="car"><img src="../images/car2.jpg" alt=""/></li>
</ul>
</div>
</div>
<style>
.containerA{display: inline-block; width: 90vw; margin: auto; padding: 15px; text-align: center;}
.filter-menu{margin-bottom: 2vw;}
.filter-menu li{ display: inline-block; padding: 1vw 2vw; background: #eb4d4b; color: #fff; cursor: pointer;}
.filter-menu li:hover, .filter-menu li.current{ background: #ff7979;}
ul{list-style: none;}
.filter-items img{max-width: 100%;height: auto;}
.filter-items li{ width: 33%; padding: 0.1vw; float: left;}
.filter-items li.active{width: 50%; padding: 2px; transition: all 0.5s ease;}
.filter-items li.delete{width: 0%; padding: 0; transition: all 0.5s ease;}
.filter-items img{display: block; width: 100%; height: 100%;}
@media screen and (min-width: 768px){
.filter-items li.active, .filter-items li{ width: 33.33%; }
}
@media screen and (min-width: 1280px){
.filter-item sli.active, .filter-items li{width: 25%;}
}
</style>
<script>
let sortBtn = document.querySelector('.filter-menu').children;
let sortItem = document.querySelector('.filter-items').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');
}
}
});
}
</script>
<section class="gallery_B">
<div class="container_B">
<div class="row_B">
<div class="gallery-filter">
<span class="filter-item active" data-filter="all">all</span>
<span class="filter-item" data-filter="travel">travel</span>
<span class="filter-item" data-filter="photograph">photograph</span>
<span class="filter-item" data-filter="people">people</span>
<span class="filter-item" data-filter="cars">cars</span>
</div>
</div>
<div class="row_B">
<div class="gallery-item travel">
<div class="gallery-item-inner"><img src="../images/1.jpg" alt="travel"></div>
</div>
<div class="gallery-item cars">
<div class="gallery-item-inner"><img src="../images/car1.jpg" alt="cars"></div>
</div>
<div class="gallery-item photograph">
<div class="gallery-item-inner"><img src="../images/7a.jpg" alt="photograph"></div>
</div>
<div class="gallery-item people">
<div class="gallery-item-inner"><img src="../images/tesla.jpg" alt="watch"></div>
</div>
<div class="gallery-item cars">
<div class="gallery-item-inner"><img src="../images/car4.jpg" alt="cars"> </div>
</div>
<div class="gallery-item travel">
<div class="gallery-item-inner"><img src="../images/2.jpg" alt="travel"></div>
</div>
<div class="gallery-item photograph">
<div class="gallery-item-inner"><img src="../images/10a.jpg" alt="photograph"></div>
</div>
<div class="gallery-item cars">
<div class="gallery-item-inner"><img src="../images/car3.jpg" alt="cars"></div>
</div>
<div class="gallery-item people">
<div class="gallery-item-inner"><img src="../images/tolkien.jpg" alt="people"></div>
</div>
<div class="gallery-item travel">
<div class="gallery-item-inner"><img src="../images/6.jpg" alt="travel"></div>
</div>
</div>
</div>
</section>
<style>
.container_B{max-width: 90vw; margin:auto;}
.row_B{display: flex; flex-wrap: wrap;}
.row_B .gallery-item .gallery-item-inner img{ max-width: 100%; vertical-align: middle;}
/*.gallery*/
.gallery_B{width: 100%; display: block; min-height: 100vh; background-color: #3f3e45; padding: 100px 0;}
.gallery_B .gallery-filter{padding: 0 15px; width: 100%; text-align: center; margin-bottom: 20px;}
.gallery_M .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_B .gallery-filter .filter-item.active{color: #ff9800; border-color : #ff9800;}
.gallery_B .gallery-item{width: calc(100% / 3); padding: 15px;}
.gallery_B .gallery-item-inner img{width: 100%;}
.gallery_B .gallery-item.show{ animation: fadeIn 0.5s ease;}
@keyframes fadeIn{
0%{opacity: 0; }
100%{opacity: 1;}
}
.gallery_B .gallery-item.hide{display: none;}
/*responsive*/
@media(max-width: 991px){
.gallery_B .gallery-item{width: 50%;}
}
@media(max-width: 767px){
.gallery_B .gallery-item{width: 100%;}
.gallery_B .gallery-filter .filter-item{margin-bottom: 10px;}
}
</style>
<script>
const filterContainer = document.querySelector(".gallery-filter"),
galleryItems = document.querySelectorAll(".gallery-item");
filterContainer.addEventListener("click", (event) =>{
if(event.target.classList.contains("filter-item")){
filterContainer.querySelector(".active").classList.remove("active");
event.target.classList.add("active");
const filterValue = event.target.getAttribute("data-filter");
galleryItems.forEach((item) =>{
if(item.classList.contains(filterValue) || filterValue === 'all'){
item.classList.remove("hide");
item.classList.add("show");
}
else{
item.classList.remove("show");
item.classList.add("hide");
}
});
}
});
</script>