jPortilio

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>