Please try this code,To Portfolio gallery with filtering
<!DOCTYPE html><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>*{box-sizing: border-box;}
body {background-color:#f1f1f1;padding:20px;font-family: Arial;}/* Center website */.main {max-width:1000px;margin: auto;}
h1 {font-size:50px;word-break: break-all;}.row {margin:10px-16px;}/* Add padding BETWEEN each column */.row,.row >.column {padding:8px;}/* Create three equal columns that floats next to each other */.column {float: left;width:33.33%;display: none;/* Hide all elements by default */}/* Clear floats after rows */.row:after {content:"";display: table;clear: both;}/* Content */.content {background-color: white;padding:10px;}/* The "show" class is added to the filtered elements */.show {display: block;}/* Style the buttons */.btn {border: none;outline: none;padding:12px16px;background-color: white;cursor: pointer;}.btn:hover {background-color:#ddd;}.btn.active {background-color:#666;color: white;}</style></head><body><!-- MAIN (Center website) --><divclass="main"><h1>MYLOGO.COM</h1><hr><h2>PORTFOLIO</h2><divid="myBtnContainer"><buttonclass="btn active"onclick="filterSelection('all')"> Show all</button><buttonclass="btn"onclick="filterSelection('nature')"> Nature</button><buttonclass="btn"onclick="filterSelection('cars')"> Cars</button><buttonclass="btn"onclick="filterSelection('people')"> People</button></div><!-- Portfolio Gallery Grid --><divclass="row"><divclass="column nature"><divclass="content"><imgsrc="/w3images/mountains.jpg"alt="Mountains"style="width:100%"><h4>Mountains</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column nature"><divclass="content"><imgsrc="/w3images/lights.jpg"alt="Lights"style="width:100%"><h4>Lights</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column nature"><divclass="content"><imgsrc="/w3images/nature.jpg"alt="Nature"style="width:100%"><h4>Forest</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column cars"><divclass="content"><imgsrc="/w3images/cars1.jpg"alt="Car"style="width:100%"><h4>Retro</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column cars"><divclass="content"><imgsrc="/w3images/cars2.jpg"alt="Car"style="width:100%"><h4>Fast</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column cars"><divclass="content"><imgsrc="/w3images/cars3.jpg"alt="Car"style="width:100%"><h4>Classic</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column people"><divclass="content"><imgsrc="/w3images/people1.jpg"alt="Car"style="width:100%"><h4>Girl</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column people"><divclass="content"><imgsrc="/w3images/people2.jpg"alt="Car"style="width:100%"><h4>Man</h4><p>Lorem ipsum dolor..</p></div></div><divclass="column people"><divclass="content"><imgsrc="/w3images/people3.jpg"alt="Car"style="width:100%"><h4>Woman</h4><p>Lorem ipsum dolor..</p></div></div><!-- END GRID --></div><!-- END MAIN --></div><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></body></html>
I hope this code will be useful.
Thank you.
Hi, I am new to this forum and I had a problem with the portfolio gallery with filtering, too. So I decided to put my question here and hope that this is alright. I used this code I just quoted (because the javascript from the W3 code didn't seem to work properly), but there are two issues, that are still there:
I have a hover effect on the buttons, but when I click on one and then on the next, everything stays dark grey. (see picture in attachment)
Is there any possibility to change that? That the buttons, that are no longer active will go back to light grey?
It works on the tryout on W3, but not on the website.
the other issue: the buttons won't work on mobile. there is no filtering happening when using a mobile device. what do I need to change?
Portfolio gallery with filtering
in JavaScript
Posted · Edited by fpf_
Hi, I am new to this forum and I had a problem with the portfolio gallery with filtering, too. So I decided to put my question here and hope that this is alright. I used this code I just quoted (because the javascript from the W3 code didn't seem to work properly), but there are two issues, that are still there:
I have a hover effect on the buttons, but when I click on one and then on the next, everything stays dark grey. (see picture in attachment)
Is there any possibility to change that? That the buttons, that are no longer active will go back to light grey?
It works on the tryout on W3, but not on the website.
the other issue: the buttons won't work on mobile. there is no filtering happening when using a mobile device. what do I need to change?
thank you so much for your help.