jPortilio.js

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

Back

Example 2

(Presents the 3 methods of showing item's content after clicking on item)

"Cover"

Tag: mobile

This is the content of item!

Cover (click on me!)

"Redirect to new page"

Tag: mobile, design

I'll redirect you to new page!

"New section"

Tag: ux

This content is shown in new element, below the item!

I'll display content below!

"Cover"

Tag: mobile, design

This is the content of item!

Cover (click on me!)

"Redirect to new page"

Tag: -

I'll redirect you to new page!

"New section"

Tag: -

This content is shown in new element, below the item!

I'll display content below!

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

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