jQuery Plugins › jQuery Layout Plugins › jQuery Elastic Grid

Responsive & Filterable jQuery Portfolio Gallery Plugin - Elastic Grid

File Size: 4.8 MB
Views Total: 125994
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Demo Download

More in this category...

View Recommended Plugins

TOP jQuery Plugins For 2024

Chrome, IE7+, FireFox, Opera, Safari#Filter#grid layout#Sort#Responsive#grid#Portfolio
Responsive & Filterable jQuery Portfolio Gallery Plugin - Elastic Grid

Elastic Grid is a powerful, responsive, interactive, filterable jQuery & CSS3 image gallery plugin designed for portfolio websites. It allows your visitors to easily sort with many CSS3 effects. When visitors click on a thumbnail, it will open a preview and show a larger image and some other content like a title, a description and a link.

Basic Usage:

1. Include the latest jQuery javascript library and other necessary javascript files in the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="js/classie.js"></script>

2. Include the jQuery Elastic Grid plugin's javascript and CSS after jQuery library.

<link rel="stylesheet" type="text/css" href="css/elastic_grid.min.css" />
<script type="text/javascript" src="js/elastic_grid.encode.js"></script>

3. Create an empty container element for the Portfolio Gallery.

<div id="demo"></div>

4. Call the plugin with options on the element you just created, and set the image data following the structure:

<script type="text/javascript">
$(function(){
$("#demo").elastic_grid({
'filterEffect': 'popup', // moveup, scaleup, fallperspective, fly, flip, helix , popup
'hoverDirection': true,
'hoverDelay': 0,
'hoverInverse': false,
'expandingSpeed': 500,
'expandingHeight': 500,
'items' :
[
{
'title' : 'Gallery 1',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/1.jpg', 'images/small/2.jpg', 'images/small/3.jpg', 'images/small/10.jpg', 'images/small/11.jpg'],
'large' : ['images/large/1.jpg', 'images/large/2.jpg', 'images/large/3.jpg', 'images/large/10.jpg', 'images/large/11.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Portrait']
},
{
'title' : 'Swiss chard pumpkin',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/4.jpg', 'images/small/5.jpg', 'images/small/6.jpg', 'images/small/7.jpg'],
'large' : ['images/large/4.jpg', 'images/large/5.jpg', 'images/large/6.jpg', 'images/large/7.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Landscape']
},
{
'title' : 'Spinach winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/15.jpg','images/small/8.jpg', 'images/small/9.jpg', 'images/small/10.jpg'],
'large' : ['images/large/15.jpg','images/large/8.jpg', 'images/large/9.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Portrait', 'Landscape']
},
{
'title' : 'Aubergine napa cabbage',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/12.jpg', 'images/small/13.jpg', 'images/small/14.jpg', 'images/small/15.jpg', 'images/small/16.jpg'],
'large' : ['images/large/12.jpg', 'images/large/13.jpg', 'images/large/14.jpg', 'images/large/15.jpg', 'images/large/16.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Portrait']
},
{
'title' : 'Swiss chard pumpkin',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/17.jpg', 'images/small/18.jpg', 'images/small/19.jpg', 'images/small/20.jpg'],
'large' : ['images/large/17.jpg', 'images/large/18.jpg', 'images/large/19.jpg', 'images/large/20.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Landscape']
},
{
'title' : 'Spinach winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/13.jpg','images/small/15.jpg', 'images/small/11.jpg', 'images/small/10.jpg'],
'large' : ['images/large/13.jpg','images/large/15.jpg', 'images/large/11.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Vintage']
},
{
'title' : 'Spinach winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/7.jpg','images/small/8.jpg', 'images/small/9.jpg', 'images/small/10.jpg'],
'large' : ['images/large/7.jpg','images/large/8.jpg', 'images/large/9.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Portrait']
},
{
'title' : 'Azuki bean',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/16.jpg', 'images/small/13.jpg', 'images/small/14.jpg', 'images/small/15.jpg', 'images/small/16.jpg'],
'large' : ['images/large/16.jpg', 'images/large/13.jpg', 'images/large/14.jpg', 'images/large/15.jpg', 'images/large/16.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Vintage']
},
{
'title' : 'Swiss chard pumpkin',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/18.jpg', 'images/small/18.jpg', 'images/small/19.jpg', 'images/small/20.jpg'],
'large' : ['images/large/18.jpg', 'images/large/18.jpg', 'images/large/19.jpg', 'images/large/20.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Landscape']
},
{
'title' : 'Winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/11.jpg','images/small/15.jpg', 'images/small/11.jpg', 'images/small/10.jpg'],
'large' : ['images/large/11.jpg','images/large/15.jpg', 'images/large/11.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Portrait']
},
{
'title' : 'Spinach winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/3.jpg','images/small/15.jpg', 'images/small/11.jpg', 'images/small/10.jpg'],
'large' : ['images/large/3.jpg','images/large/15.jpg', 'images/large/11.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://porfolio.bonchen.net/' },
{ 'title':'Download', 'url':'http://porfolio.bonchen.net/'}
],
'tags'  : ['Vintage']
},
{
'title' : 'Spinach winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/5.jpg','images/small/8.jpg', 'images/small/9.jpg', 'images/small/10.jpg'],
'large' : ['images/large/5.jpg','images/large/8.jpg', 'images/large/9.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://#' },
{ 'title':'Download', 'url':'http://#'}
],
'tags'  : ['Portrait', 'Landscape']
},
{
'title' : 'Azuki bean',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/6.jpg', 'images/small/13.jpg', 'images/small/14.jpg', 'images/small/15.jpg', 'images/small/16.jpg'],
'large' : ['images/large/6.jpg', 'images/large/13.jpg', 'images/large/14.jpg', 'images/large/15.jpg', 'images/large/16.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://#' },
{ 'title':'Download', 'url':'http://#'}
],
'tags'  : ['Vintage']
},
{
'title' : 'Swiss chard pumpkin',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/8.jpg', 'images/small/18.jpg', 'images/small/19.jpg', 'images/small/20.jpg'],
'large' : ['images/large/8.jpg', 'images/large/18.jpg', 'images/large/19.jpg', 'images/large/20.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://#' },
{ 'title':'Download', 'url':'http://#'}
],
'tags'  : ['Landscape']
},
{
'title' : 'Spinach winter purslane',
'description'   : 'Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage.',
'thumbnail' : ['images/small/9.jpg','images/small/15.jpg', 'images/small/11.jpg', 'images/small/10.jpg'],
'large' : ['images/large/9.jpg','images/large/15.jpg', 'images/large/11.jpg', 'images/large/10.jpg'],
'button_list'   :
[
{ 'title':'Demo', 'url' : 'http://#' },
{ 'title':'Download', 'url':'http://#'}
],
'tags'  : ['Vintage', 'Landscape']
}

]
});
});
</script>

Change log:

2017-06-02

2017-05-31

  • fix filter position

2017-05-30

  • fix offset top issue

2017-04-24

  • Grid w/ youtube & vivimeo embeded

2017-02-08

  • JS update

2017-01-04

  • show title in images

This awesome jQuery plugin is developed by vukhanhtruong. For more Advanced Usages, please check the demo page or visit the official website.