Gridion jQuery – Responsive Bootstrap Portfolio Grid

Gridion jQuery is a plugin to create grid layout that is based on the famous Bootstrap framework. With this plugin, you can create portfolios, showcases, galleries and more. Beside, you can combine filters, ajax load and lightbox features that are integrated into the plugin to make unique layout with lots of animations. The lightbox feature in this plugin can load photos from image paths and also flexible HTML contents. Explore demos and find what you need now.

 

 

 

Demos:

  1. Filter with inline counter
  2. Filter with tooltip counter
  3. Grid Filter without counter
  4. Grid without filter
  5. Card style layout with 5 columns
  6. Card style layout with 4 columns
  7. Grid with Mix style

 

 

Gridion jQuery Features:

  • Create responsive grid layouts.
  • Supports filters with item counters.
  • Support loading new items with AJAX.
  • Support creating lightboxes/panels with simple image url.
  • Supports loading lightboxes/panels with flexible HTML contents with AJAX.
  • Supports showing lightboxes/panels with three styles (left, center and right positions).
  • Lots of CSS animation effects.
  • Lots of colors to customize.

 

Change Logs:

Nov 2018: Update Versioin 1.1:

+ Added:

  • “AJAXContentDir” Javascript parameter to set AJAX content directory path.
  • “NavIcon” Javascript parameter to set image path for Prev, Next buttons.
  • “KeyPress” Javascript parameter to enable LEFT, RIGHT keys to move previous, next lightbox panels and ESC key to close lightbox panel.

 

Oct 2018: First Version.

 

Credits:

 

Table of Contents:

  1. Installing Gridion jQuery plugin.
  2. Gridion jQuery HTML Structure.
  3. Call Gridion jQuery plugin.
  4. AJAX load for items and panel contents.
  5. Parameters and Animation Classes.

 

Section 1: Installing Gridion jQuery Plugin.

First of all, to ensure everything works correctly, please use <!DOCTYPE html> at the top of page.

Then, includes the following code into HEAD section of the page.

Includes CSS files:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" type="text/css" />

<!-- Animation Effects -->
<link rel="stylesheet" href="css/animation.css" type="text/css" />

<!-- Background Colors -->
<link rel="stylesheet" href="css/color-palette.css" type="text/css" />

<!-- Gridion CSS Pack -->
<link rel="stylesheet" href="css/gridion-js.css" type="text/css" />

Includes Javascript files:

<!-- jQuery Library -->
<script type="text/javascript" src="js/jquery/jquery.min.3.2.1.js"></script>

<!-- Gridion Plugin -->
<script type="text/javascript" src="js/gridion.dev.js"></script>

Done. Gridion jQuery plugin is ready to use.

 

Section 2: Gridion jQuery HTML Structure.

This section should be read along with the example files also contained in the download package.

A simple structure of the Gridion jQuery has two parts: Filter Holder and Item Holder.

The Filter Holder is based on the Bootstrap Nav Component so that you can customize it with Bootstrap styles. The filter is used to filter item groups.

The Item Holder is based on the Bootstrap layout with column and card styles. It is the place to add items for the grid.

<!-- Start Gridion  -->
<div class="gridion" id="gridion-id">
  <!-- Start Gridion Filter Holder -->
  <ul class="gridion-filter">
    <li class="nav-item"><div class="nav-link">Filter name</div></li>
  </ul>
  <!-- End Gridion Filter Holder -->

  <!-- Start Gridion Item Holder -->
  <div class="gridion-item-holder">
    
    <!-- Start Item -->
    <div class="gridion-item">
      // Add item content here
    </div>
    <!-- End Item -->

  </div>
  <!-- End Gridion Item Holder -->
</div>
<!-- End Gridion -->

In the case, you don’t want to use the Filter Holder you can remove it without problems.

Example of an item structure:

<!-- Start Item -->
<div class="gridion-item" data-group="item-group-name">
  <div class="gridion-item-frame">
    <div data-id="panel-id" class="gridion-btn-on">
      <img src="the_image_path" class="gridion-fullimg" />
    </div>
  </div>
</div>
<!-- End Item -->

There are two special classes that are used in the item structure: “gridion-btn-on” and “gridion-fullimg”.

“gridion-btn-on” is used to activate the panel feature.

“gridion-fullimg” will calculate the image size to fit the item size.

 

Section 3: Call Gridion jQuery Plugin.

To call the plugin you can add into HEAD section a script like below:

<script type="text/javascript">
$(window).on('load', function() {
  $('#gridion-id').gridion({
    // Add Options
  });
})
</script>

The above script just shows a simple way to call the plugin. In real use, you may need to add more parameters to obtain performance you want. To know more about parameters, please check Parameters Section below.

 

 

Section 4: AJAX load for items and panel contents.

The plugin supports two AJAX load features to load new items for the grid and panel contents.

The AJAX features will load data from files in the “/contents/gridion/” folder. for items, the dynamic data will be stored or generated in “gridstation.php” file and panel data will be stored or generated in “panelstation.php” file.

If you are not familiar with PHP you can create static data by using the same structure of contents we provided in demo files. If you can use PHP you can generate data dynamically by loading data in your database then produce content structures with your data to show in your page.

Dynamic Data for items:

When you load new items by AJAX method the plugin will send two parameters to the “gridstation.php” with POST method: ‘filtervalue’ and ‘groupamount’.

In PHP, you can use $_POST to get these parameter values.

Example: $_POST[‘filtervalue’] and $_POST[‘groupamount’]

filtervalue is the group name of items. The items are loaded will be added to the same group in the grid layout.

groupamount is the current amount of items in the group. This value is used to calculate remaining items that the plugin can load. This depends on your data.

 

Dynamic Data for panels:

When you show a panel content by AJAX method the plugin will send a paremater to the “panelstation.php” with POST method: ‘panelid’

in PHP, you can get the value of panelid by useing $_POST[‘panelid’]

You can use if_else statement to load exactly the panel you want to show by panelid.

 

If you want to return an error message when the plugin cannot load contents by AJAX you can use this code (for PHP):

$status = ['status' => 404, 'message' => 'The content not found!!!'];
header('Content-Type: application/json');
echo json_encode($status);

You can change the message value to whatever you like or just remove it.

 

Static Data:

In case you don’t want to use programming languages to generate AJAX contents you can use static data by create files with any file extension you like to contain your items or panels.

Example:

To load “HTML” file that contains item data you can create a file in “/contents/gridion/” folder with a name structure:

items-filtervalue-groupamount.html (filtervalue and groupamount are parameters that are mentioned above).

To load “HTML” file that contains a panel data you can create a file “/contents/gridion/” folder with a name structure:

panel-panelid.html (panelid is the parameter that is mentioned above).

 

Section 5: Parameters and Animation Classes.

 

I. HTML Parameters:
Parameters Positions Description
data-filter gridion-filter This param is used to set item group to show in the grid.
To make a filter show all item you just set “*” as the value.
data-maxitem gridion-filter This param is used to set maximum number of items in the specified group.
data-ratio gridion-item-holder This param is used to set size ratio for items.
This parameter works with Column Style only.
data-gutter gridion-item-holder This param is used to set space between items.
This parameter works with Column Style only.
data-gridanimin gridion-item-holder This param is used to set animation effects to show items.
Value: check Showing Animation Classes below.
data-gridanimout gridion-item-holder This param is used to set animation effects to hide items.
Value: check Hiding Animation Classes below.
data-gridext gridion-item-holder This param is used to set AJAX file extension to load items.
Default value: php
data-group gridion-item This param is used to set group name for items.
data-id gridion-btn-on This param is used to set panel id.
data-src gridion-btn-on This param is used to set a image path when you want to show photo panel.
data-panelbg gridion-btn-on This param is used to set background for photo panel.
data-animin gridion-btn-on This param is used to set animation effects to show panels.
Value: check Showing Animation Classes below.
data-animout gridion-btn-on This param is used to set animation effects to hide panels.
Value: check Hiding Animation Classes below.
data-panelext gridion-btn-on This param is used to set AJAX file extension to load panels.
Default value: php

 

II. Javascript Parameters:
Parameters Properties Description
GridStyle string This param is used to set the grid style.
Value: card | col-2 | col-3 | col-4 | col-6
MinCols integer This param is used to set minimum columns for Column style when the grid is rendered on a small screen.
Value:  1 | 2
Default value: 1
MainColor string This param is used to set color scheme for the grid layout.
Value: none | red | pink | purple | blue | green | teal | yellow | orange | brown | bluegrey | black.
FilterPosition string This param is used to set filter positions.
Value: start | center | end.
Default value: center
FilterCounter string This param is used to set the style for item counter.
Value: none | tooltip | inline.
Default value: none.
EnableAJAXLoad boolean This param is used to enable/disable AJAX load for items.
Value: true | false
Default value: true
DefaultGroup string This param is used to set a default group to load by AJAX if there is no group is selected.
AJAXButtonPosition string This param is used to set Item Load Button position.
Value: left | center | right.
Default value: center
AJAXButtonText string This param is used to set title for Item Load Button.
AJAXloadmsg string This param is used to set title for Item Load Button when there is no item to load.
AJAXContentDir string This param is used to set AJAX content directory path.
Default value: ‘contents/gridion/’
NavIcon string This param is used to set image path for PREV, NEXT buttons.
Default value: ‘images/icons/arrow.png’
PanelBg string This param is used to set a background color class for photo panels.
Check “color-palette.css” file for background classes.
KeyPress boolean This param is used to enable LEFT, RIGHT keys to move previous, next panels
and ESC key to close panel.

 

III. Animation Classes:

Showing Animation Classes:

bounce
flash
pulse
rubberBand
shake
headShake
swing
tada
wobble
jello
flipInX
flipInY
fadeIn
fadeInUp
fadeInDown
fadeInLeft
fadeInRight
fadeInUpBig
fadeInDownBig
fadeInLeftBig
fadeInRightBig
bounceIn
bounceInDown
bounceInUp
bounceInLeft
bounceInRight
rotateIn
rotateInDownLeft
rotateInDownRight
rotateInUpLeft
rotateInUpRight
lightSpeedIn
jackInTheBox
rollIn
zoomIn
zoomInDown
zoomInLeft
zoomInRight
zoomInUp
slideInDown
slideInLeft
slideInRight
slideInUp

 

Hiding Animation Classes:

flipOutX
flipOutY
fadeOut
fadeOutUp
fadeOutDown
fadeOutLeft
fadeOutRight
fadeOutUpBig
fadeOutDownBig
fadeOutLeftBig
fadeOutRightBig
bounceOut
bounceOutDown
bounceOutUp
bounceOutLeft
bounceOutRight
rotateOut
rotateOutDownLeft
rotateOutDownRight
rotateOutUpLeft
rotateOutUpRight
lightSpeedOut
rollOut
zoomOut
zoomOutDown
zoomOutLeft
zoomOutRight
zoomOutUp
slideOutDown
slideOutLeft
slideOutRight
slideOutUp
hinge

 

 

 

[endedwords product=””]http://talk.sonhlab.com/room/gridion-jquery-plugin[/endedwords]