3.1 Download and Installation
Firstly, download jPortilio. At least, download jportilio.js (or jportilio.min.js in minimized version) and jportilio.css (or jportilio.min.css in minimized version). You can download also theme's CSS file, but is not required. Then copy CSS and Javascript files to your project.
<link rel="stylesheet" type="text/css" href="css/jportilio.css" />
<script type="text/javascript" src="js/jportilio.js"></script>
OR
<link rel="stylesheet" type="text/css" href="css/jportilio.min.css" />
<script type="text/javascript" src="js/jportilio.min.js"></script>
3.2 Preparing a basic structure
JPortilio frame contains two main elements: a group of tag buttons and a grid of items.
<!-- 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='jprt-container'>
<!-- first item -->
<div class='jprt-item' data-tags='mobile'>
<div class='jprt-caption'>
<!-- caption -->
</div>
<div class='jprt-content'>
<!-- content -->
</div>
<div class='jprt-hover'>
<!-- hover -->
</div>
</div>
<!-- second item -->
<div class='jprt-item' data-tags='mobile,design'>
<!-- ... -->
</div>
<!-- other items -->
</div>
Important in buttons:
data-jprtgrid
in button indicates on ID of grid,
data-tag
contains a list of tags used in filtering.
Important in grid:
- ID of grid DOM element is used by tag buttons (in example
jprt-1
),
- Each item is created in
div
element with class jprt-item
,
data-tags
is a list of tags assigned to specific item,
- Each item may have 3 layers:
jprt-caption
- is shown as caption of item,
jprt-hover
- is shown as hover layer of item, when cursor points on item,
jprt-content
- contains a details and may be shown on few different ways.
The content of each layer can be freely created. It means that the fields with certain sizes are ready to fill in.
3.3 Javascript initialization
JPortilio initialization:
$(function () {
$('.jprt-container').jportilio();
});
jprt-container
is a DOM element containing the grid of items.
JPortilio can be initialized with custom options, e.g:
$(function () {
$('.jprt-container').jportilio({'ratio': '0.75', 'ws_lg': '4'});
});
More details about options can be found in section Default settings
3.4 Example 1 (without showing content yet)
Example 1 bases on the previous section, so it hasn't full functionality. Example with source code you can find here Example 1
(Fonts from example can be different than in your project. We used 'Dosis' font from google fonts.)
3.5 Content show
Content can be shown in 3 different ways. In each case we need define at least data-content-show
attribute for jprt-item
.
A) Cover of item
The content layer covers the whole item. Add data-content-show='cover'
to specific jprt-item
element:
<div id='jprt-1' class='container jprt-container'>
<div class='jprt-item' data-tags='mobile' data-content-show='cover'>
<div class='jprt-caption'>
<!-- ... -->
</div>
<div class='jprt-content'>
<!-- ... -->
</div>
<div class='jprt-hover'>
<!-- ... -->
</div>
<!-- ... -->
</div>
</div>
B) Displayed in new window
Clicking on item redirects to another page. This solution requires two data attributes:
data-content-show='redirect'
with value redirect causes that clicking on item will redirect user,
data-content-url='http://www.your-url.com'
stores the url of redirection.
<div id='jprt-1' class='container jprt-container'>
<div class='jprt-item' data-tags='mobile,design' data-content-show='redirect' data-content-url='http://www.jportilio.com'>
<div class='jprt-caption'>
<!-- ... -->
</div>
<div class='jprt-content'>
</div>
<div class='jprt-hover'>
<!-- ... -->
</div>
</div>
</div>
However, if you want display any content on item and then redirect to new page, you can use method A "cover". And in content you can place a button or link to another page.
C) Expand section below of item's row
This solution will show new section below the item's row. The content section has the same width as width of grid. To use this solution, it's needed to add data attribute: data-content-show='new_section'
:
<div id='jprt-1' class='container jprt-container'>
<div class='jprt-item' data-tags='ux' data-content-show='new_section'>
<div class='jprt-caption'>
<!-- ... -->
</div>
<div class='jprt-content'>
<!-- ... -->
</div>
<div class='jprt-hover'>
<!-- ... -->
</div>
</div>
</div>
3.6 Example 2
Example 2 presents the three methods of showing content. Example with source code you can find here Example 2
3.7 Optional decorations
Layers (caption, hover and content) can be created as you will. However, we prepared few decorations, which you can add to your project. More details about decorations, you can find in section Decorations.