jQuery Plugin for A Responsive, Filterable Grid of Items | jportilio

JPortilio is a JQuery plug-in for creating responsive, filterable tags and a grid of objects, such as a portfolio.

responsive portfolio gallery with filtering, responsive portfolio gallery with jquery, jquery portfolio gallery with categories, filterable gallery jquery

How to make use of it:

1. Download, decompress and copy the jQuery jPortilio component CSS and Javascript files to your project.

<link rel="stylesheet" href="css/jportilio.css">
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/jportilio.min.js"></script>

2. Create a grid of filterable items using the “data tags” attribute, which is a list of tags assigned to a specific item.

<div id="jprt-1" class="jprt-container"> 
  <!-- first item -->
  <div class="jprt-item" data-tags="fruits">
    <div class="jprt-caption"> 
      <!-- caption --> 
    <div class="jprt-content"> 
      <!-- content --> 
    <div class="jprt-hover"> 
      <!-- hover --> 
  <!-- second item -->
  <div class="jprt-item" data-tags="fruits,vegetables"> 
    <!-- ... --> 
  <!-- other items --> 

3. Create a set of tag buttons to filter the grid of items by tags.

<div class="jprt-buttons">

  <button class="jprt-btn" 
    data-tag="fruits" >

  <button class="jprt-btn" 


4. Initialize the plugin.

$(function () {



5. Plugin options available.

$(function () {


  filter: [],

  // the ratio of item's width to item's height 
  ratio: "0.75",

  // number of items in row for small devices 
  // <768px 
  ws_xs: 1,

  //  768px < x < 992px 
  ws_sm: 2,

  // 992px < x < 1200px 
  ws_md: 3,

  // 1200px < x
  ws_lg: 4


jQuery Plugin For Portfolio Style Content Gallery | WM Gridfolio

jQuery Plugin To Filter Responsive Grid Of Items, jPortilio Plugin/Github

See Demo And Download

Official Website(tomaszantas): Click Here

This superior jQuery/javascript plugin is developed by tomaszantas. For extra advanced usage, please go to the official website.

Related Posts


Adding Zoom-on-Wheel and Pan-on-Drag to Inline SVG Elements

Vanilla-js module for adding zoom and panning behavior when dragging to SVG embedded elements. A lightweight Vanilla JavaScript plugin that enables zoom and pan functions on an…


Sorting HTML Table Vanilla JavaScript Library | Sortable.js

Sortable – Small JS vanilla table sorter makes any table with class = “sortable“, er, sortable. That is, the user can click the table header and change…


WYSIWYG Rich Text Editor With jQuery And FontAwesome | RichText

RichText jQuery implementation for WYSIWYG Rich Text Editor which uses Font Awesome Iconic Font for editor icons. It is licensed under AGPL-3.0. Initialize editor Simply call .richText() on your jQuery(‘textarea’) or jQuery(‘input’)…


[Autocomplete] Email Domain Suggestions Like Gmail, Outlook, or More | email-genie

Email Genie allows auto-completion in the email field by providing a list of domain suggestions (gmail.com, outlook.com, etc.). This package is lightweight, flexible, compatible with libraries (jQuery,…


[Generator] JavaScript Library for Creating Squircley Magic ✨ | squircley.js

squircley.js is the core magic of Squirclular ✨ from https://squircley.app wrapped in a simple 0-dependency JavaScript library. squircley.js can generate SVG files, add square backgrounds to DOM…