JQuery plugin to create nice filterable grid of items, such as portfolio
(Presents the 3 methods of showing item's content after clicking on item)
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'>
<div class='jprt-item' data-tags='mobile' data-content-show='cover'>
<div class='jprt-caption'>
<h1>"Cover"</h1>
<p>Tag: mobile</p>
</div>
<div class='jprt-content'>
<h1>This is the content of item!</h1>
</div>
<div class='jprt-hover'>
<h1>Cover (click on me!)</h1>
</div>
</div>
<div class='jprt-item' data-tags='mobile,design' data-content-show='redirect' data-content-url='http://www.codepany.com'>
<div class='jprt-caption'>
<h1>"Redirect to new page"</h1>
<p>Tag: mobile, design</p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>I'll redirect you to new page!</h1>
</div>
</div>
<div class='jprt-item' data-tags='ux' data-content-show='new_section'>
<div class='jprt-caption'>
<h1>"New section"</h1>
<p>Tag: ux</p>
</div>
<div class='jprt-content'>
<h1>This content is shown in new element, below the item!</h1>
</div>
<div class='jprt-hover'>
<h1>I'll display content below!</h1>
</div>
</div>
<div class='jprt-item' data-tags='mobile,design' data-content-show='cover'>
<div class='jprt-caption' >
<h1>"Cover"</h1>
<p>Tag: mobile, design</p>
</div>
<div class='jprt-content'>
<h1>This is the content of item!</h1>
</div>
<div class='jprt-hover'>
<h1>Cover (click on me!)</h1>
</div>
</div>
<div class='jprt-item' data-content-show='redirect' data-content-url='http://www.codepany.com'>
<div class='jprt-caption'>
<h1>"Redirect to new page"</h1>
<p>Tag: - </p>
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<h1>I'll redirect you to new page!</h1>
</div>
</div>
<div class='jprt-item' data-content-show='new_section'>
<div class='jprt-caption'>
<h1>"New section"</h1>
<p>Tag: - </p>
</div>
<div class='jprt-content'>
<h1>This content is shown in new element, below the item!</h1>
</div>
<div class='jprt-hover'>
<h1>I'll display content below!</h1>
</div>
</div>
</div>
</body>
</html>