Portfolio Gallery Website with filtering

Next Page >>
div class container

How to » Portfolio Gallery Website with filtering

Study in this chapter:
1. - How to make a filterable portfolio? - example
2. - portfolio gallery website with filtering

Example:

Portfolio Gallery Website with filtering with javascript

All HTML, CSS and JavaScript code

Example:

<!DOCTYPE html>

  <html>

  <head>

  <meta name="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: 12px 16px;

  background-color: white;

  cursor: pointer;

  }
.btn:hover {

  background-color: #ddd;

  }
.btn.active {

  background-color: #666;

  color: white;

  }

  </style>

  </head>

  <body>
<!-- MAIN (Center website) -->

  <div class="main">
<h1>MY_LOGO.COM</h1>

  <hr>
<h2>Portfolio with filter</h2>
<div id="myBtnContainer">

  <button class="btn active" onClick="filterSelection('all')"> Show all</button>

  <button class="btn" onClick="filterSelection('nature')"> Nature</button>

  <button class="btn" onClick="filterSelection('cars')"> Cars</button>

  <button class="btn" onClick="filterSelection('cities')"> Cities</button>

  </div>
<!-- Portfolio Gallery Grid -->

  <div class="row">

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature.jpg" alt="nature" style="width:100%">

  <h4>Nature</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature1.jpg" alt="nature" style="width:100%">

  <h4>Nature</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature2.jpg" alt="Nature" style="width:100%">

  <h4>Nature</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature3.jpg" alt="Nature" style="width:100%">

  <h4>Nature Forest</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars1.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars2.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars3.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>
 <div class="column cities">

  <div class="content">

  <img src="https://www.agernic.com/images/cities.jpg" alt="cities" style="width:100%">

  <h4>Nice town</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cities">

  <div class="content">

  <img src="https://www.agernic.com/images/cities1.jpg" alt="cities" style="width:100%">

  <h4>Nice town</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cities">

  <div class="content">

  <img src="https://www.agernic.com/images/cities3.jpg" alt="cities" style="width:100%">

  <h4>Nice town</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>

CSS code - Portfolio Gallery Website

Use CSS style

* {

  box-sizing: border-box;

  }
body {

  background-color: #f1f1f1;

  padding: 20px;

  font-family: Arial;

  }
.main {

  max-width: 1000px;

  margin: auto;

  }
h1 {

  font-size: 50px;

  word-break: break-all;

  }
.row {

  margin: 10px -16px;

  }
.row,

  .row > .column {

  padding: 8px;

  }


.column {

  float: left;

  width: 33.33%;

  display: none;

  }
.row:after {

  content: "";

  display: table;

  clear: both;

  }
.content {

  background-color: white;

  padding: 10px;

  }
.show {

  display: block;

  }
.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;

  }

Tags: portfolio gallery

Portfolio gallery HTML and JavaScript

Example - Portfolio gallery HTML and JavaScript

<!-- MAIN (Center website) -->

  <div class="main">
<h1>MY_LOGO.COM</h1>

  <hr>
<h2>Portfolio with filter</h2>
<div id="myBtnContainer">

  <button class="btn active" onClick="filterSelection('all')"> Show all</button>

  <button class="btn" onClick="filterSelection('nature')"> Nature</button>

  <button class="btn" onClick="filterSelection('cars')"> Cars</button>

  <button class="btn" onClick="filterSelection('cities')"> Cities</button>

  </div>
<!-- Portfolio Gallery Grid -->

  <div class="row">

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature.jpg" alt="nature" style="width:100%">

  <h4>Nature</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature1.jpg" alt="nature" style="width:100%">

  <h4>Nature</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature2.jpg" alt="Nature" style="width:100%">

  <h4>Nature</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column nature">

  <div class="content">

  <img src="https://www.agernic.com/images/nature3.jpg" alt="Nature" style="width:100%">

  <h4>Nature Forest</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars1.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars2.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cars">

  <div class="content">

  <img src="https://www.agernic.com/images/nice-cars3.jpg" alt="Car" style="width:100%">

  <h4>Nice car</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>
 <div class="column cities">

  <div class="content">

  <img src="https://www.agernic.com/images/cities.jpg" alt="cities" style="width:100%">

  <h4>Nice town</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cities">

  <div class="content">

  <img src="https://www.agernic.com/images/cities1.jpg" alt="cities" style="width:100%">

  <h4>Nice town</h4>

  <p>Lorem ipsum dolor..</p>

  </div>

  </div>

  <div class="column cities">

  <div class="content">

  <img src="https://www.agernic.com/images/cities3.jpg" alt="cities" style="width:100%">

  <h4>Nice town</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>

Summary of description

<< Previous Page
HTML Button Style

Next Page >>
HTML Button Action

portfolio gallery
Portfolio Gallery Website with filtering - how to

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.