JQuery plugin to create nice filterable grid of items, such as portfolio
(Without showing content yet)
Tag: mobile
Tag: mobile, design
Tag: ux
Tag: mobile, design
Tag: -
Tag: -
<html lang="en">
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/jportilio.css" />
<link rel="stylesheet" type="text/css" href="css/jportilio_style_default.css" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/jportilio.js"</script>
<!-- ... -->
</head>
<body>
<!-- jportilio initialization -->
<script>
$(function () {
$('.jprt-container').jportilio();
});
<script>
<!-- group of tag buttons: -->
<div class='jprt-buttons'>
<button class='jprt-btn' data-jprtgrid='jprt-1' data-tag='mobile'>Mobile</button>
<button class='jprt-btn' data-jprtgrid='jprt-1' data-tag='ux,design'>Design</button>
</div>
<!-- grid of items: -->
<div id='jprt-1' class='container jprt-container'>
<!-- 1st item: -->
<div class='jprt-item' data-tags='mobile'>
<!-- caption layer: -->
<div class='jprt-caption'>
<h1>item 1 (caption)</h1>
<p>Tag: mobile</p>
</div>
<!-- content layer: -->
<div class='jprt-content'>
</div>
<!-- hover layer: -->
<div class='jprt-hover'>
<h1>item 1 (hover)</h1>
</div>
</div>
<!-- 2nd item: -->
<div class='jprt-item' data-tags='mobile,design'>
<div class='jprt-caption'>
<h1>item 2 (caption)</h1>
<p>Tag: mobile, design</p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>item 2 (hover)</h1>
</div>
</div>
,<!-- 3rd item: -->
<div class='jprt-item' data-tags='ux'>
<div class='jprt-caption'>
<h1>item 3 (caption)</h1>
<p>Tag: ux</p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>item 3 (hover)</h1>
</div>
</div>
<!-- 4th item: -->
<div class='jprt-item' data-tags='mobile,design'>
<div class='jprt-caption' >
<h1>item 4 (caption)</h1>
<p>Tag: mobile, design</p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>item 4 (hover)</h1>
</div>
</div>
<!-- 5th item: -->
<div class='jprt-item'>
<div class='jprt-caption'>
<h1>item 5 (caption)</h1>
<p>Tag: - </p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>item 5 (hover)</h1>
</div>
</div>
<!-- 6th item: -->
<div class='jprt-item'>
<div class='jprt-caption'>
<h1>item 6 (caption)</h1>
<p>Tag: - </p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>item 6 (hover)</h1>
</div>
</div>
</div>
</body>
</html>