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 |
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
- JS Update
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.