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:
- Filter with inline counter
- Filter with tooltip counter
- Grid Filter without counter
- Grid without filter
- Card style layout with 5 columns
- Card style layout with 4 columns
- 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:
- Installing Gridion jQuery plugin.
- Gridion jQuery HTML Structure.
- Call Gridion jQuery plugin.
- AJAX load for items and panel contents.
- 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]