jPortilio.js

JQuery plugin to create nice filterable grid of items, such as portfolio

Back

Example 1

(Without showing content yet)

item 1 (caption)

Tag: mobile

item 1 (hover)

item 2 (caption)

Tag: mobile, design

item 2 (hover)

item 3 (caption)

Tag: ux

item 3 (hover)

item 4 (caption)

Tag: mobile, design

item 4 (hover)

item 5 (caption)

Tag: -

item 5 (hover)

item 6 (caption)

Tag: -

item 6 (hover)

Source code



<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>