Portfolio con filtri






Codice HTML

<h2>PORTFOLIO</h2>
<div id="myBtnContainer">
 <button class="btn active" onclick="filterSelection('all')"> Mostra tutto</button>
 <button class="btn" onclick="filterSelection('nature')"> Natura</button>
 <button class="btn" onclick="filterSelection('cars')"> Macchine</button>
 <button class="btn" onclick="filterSelection('people')"> Gente</button>
</div>

<!-- Portfolio Gallery Grid --> <div class="row"> <div class="column nature"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/mountains.jpg" alt="Mountains" style="width:100%"> <h4>Montagne</h4> <p>Il mio testo..</p> </div> </div> <div class="column nature"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/lights.jpg" alt="Lights" style="width:100%"> <h4>Luci</h4> <p>Il mio testo..</p> </div> </div> <div class="column nature"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/nature.jpg" alt="Nature" style="width:100%"> <h4>Foresta</h4> <p>Il mio testo..</p> </div> </div>

<div class="column cars"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/cars1.jpg" alt="Car" style="width:100%"> <h4>Antica</h4> <p>Il mio testo..</p> </div> </div> <div class="column cars"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/cars2.jpg" alt="Car" style="width:100%"> <h4>Veloce</h4> <p>Il mio testo..</p> </div> </div> <div class="column cars"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/cars3.jpg" alt="Car" style="width:100%"> <h4>Classica</h4> <p>Il mio testo..</p> </div> </div>

<div class="column people"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/people1.jpg" alt="People" style="width:100%"> <h4>Ragazza</h4> <p>Il mio testo..</p> </div> </div> <div class="column people"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/people2.jpg" alt="People" style="width:100%"> <h4>Uomo</h4> <p>Il mio testo..</p> </div> </div> <div class="column people"> <div class="content"> <img src="http://www.puntoinformaticofree.it/pagine_tutorial/portfolio_immagini/people3.jpg" alt="People" style="width:100%"> <h4>Donna</h4> <p>Il mio testo..</p> </div> </div> <!-- END GRID --> </div>



Codice CSS

/* Center website */
.main {
 max-width: 1000px;
 margin: auto;
}

h1 { font-size: 50px; word-break: break-all; }

.row { margin: 8px -16px; }

/* Add padding BETWEEN each column (if you want) */ .row, .row > .column { padding: 8px; }

/* Create three equal columns that floats next to each other / .column { float: left; width: 33.33%; display: none; / Hide columns 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: 12px 16px; background-color: white; cursor: pointer; }

/* Add a grey background color on mouse-over */ .btn:hover { background-color: #ddd; }

/* Add a dark background color to the active button */ .btn.active { background-color: #666; color: white; }



Codice Javascript

<script>
filterSelection("all") // Execute the function and show all columns
function filterSelection(c) {
 var x, i;
 x = document.getElementsByClassName("column");
 if (c == "all") c = "";
 // Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
 for (i = 0; i < x.length; i++) {
 w3RemoveClass(x[i], "show");
 if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
 }
}

// Show filtered elements 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]; } } }

// Hide elements that are not selected 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>