Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap Demo: https://jsbin.com/jeyadac
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="Akshay Nagpal | akshaynagpal.me"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="filter-gallery.js"></script>
<title>Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap</title>
</head>
<body>
<div id="items" class="container-fluid">
<h1>Filter Gallery using HTML5, JavaScript, JQuery & Bootstrap</h1>
<!-- BUTTON GROUP FOR CATEGORIES -->
<div class="btn-group">
<button type="button" class="btn btn-primary category-button" data-filter = "all"> All </button>
<button type="button" class="btn btn-primary category-button" data-filter = "category1"> Category 1 </button>
<button type="button" class="btn btn-primary category-button" data-filter = "category2"> Category 2 </button>
<button type="button" class="btn btn-primary category-button" data-filter = "category3"> Category 3 </button>
<button type="button" class="btn btn-primary category-button" data-filter = "category4"> Category 4 </button>
</div>
<!-- END BUTTON GROUP FOR CATEGORIES -->
<hr>
<div class="col-sm-3 all category1 well">
<h1>ONE</h1>
</div>
<div class="col-sm-3 all category2 well">
<h1>TWO</h1>
</div>
<div class="col-sm-3 all category3 well">
<h1>THREE</h1>
</div>
<div class="col-sm-3 all category4 well">
<h1>FOUR</h1>
</div>
<div class="col-sm-3 all category2 well">
<h1>TWO</h1>
</div>
<div class="col-sm-3 all category1 well">
<h1>ONE</h1>
</div>
<div class="col-sm-3 all category4 well">
<h1>FOUR</h1>
</div>
<div class="col-sm-3 all category3 well">
<h1>THREE</h1>
</div>
<div class="col-sm-3 all category1 well">
<h1>ONE</h1>
</div>
<div class="col-sm-3 all category2 well">
<h1>TWO</h1>
</div>
<div class="col-sm-3 all category3 well">
<h1>THREE</h1>
</div>
<div class="col-sm-3 all category4 well">
<h1>FOUR</h1>
</div>
</div>
</body>
</html>

Hi @akshaynagpal,

Is it possible to use the filter in a link? (eg. site.com/gallery?category=4)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment