Elastic Grid is a fully responsive image gallery. 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.
Style for plugin
<link rel="stylesheet" type="text/css" href="css/elastic_grid.min.css" />
Scripts for plugin
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/modernizr.custom.js"></script> <script src="js/classie.js"></script> <script type="text/javascript" src="js/elastic_grid.encode.js"></script>
<div id="elastic_grid"></div>
Initial Script
<script type="text/javascript"> $(function(){ $("#elastic_grid_demo").elastic_grid({ 'items' : [ { 'title' : 'Title #1', 'description' : ' Description text here', 'thumbnail' : ['images/small/1.jpg', 'images/small/2.jpg'], 'large' : ['images/large/1.jpg', 'images/large/2.jpg'], 'img_title' : ['image #1 title', 'image #2 title'], 'button_list' : [ { 'title':'Demo', 'url' : 'http://bonchen.net/' }, { 'title':'Download', 'url':'http://porfolio.bonchen.net/'} ], 'tags' : ['Portrait'] }, { 'title' : 'Title #2', 'description' : 'Description text here', 'thumbnail' : ['images/small/4.jpg', 'images/small/5.jpg'], 'large' : ['images/large/4.jpg', 'images/large/5.jpg'], 'img_title' : ['image #1 title', 'image #2 title'], 'button_list' : [ { 'title':'Demo', 'url' : 'http://bonchen.net/' }, { 'title':'Download', 'url':'http://porfolio.bonchen.net/'} ], 'tags' : ['Vintage'] }, { 'title' : 'Title #3', 'description' : 'Description text here', 'thumbnail' : ['images/small/15.jpg', 'images/small/2.jpg'], 'large' : ['images/large/15.jpg', 'images/large/2.jpg'], 'img_title' : ['image #1 title', 'image #2 title'], 'button_list' : [ { 'title':'Demo', 'url' : 'http://bonchen.net/' }, { 'title':'Download', 'url':'http://porfolio.bonchen.net/'} ], 'tags' : ['BW'] } ] }); }); </script>
Below is an example of the code with all available options and their defaults:
<script type="text/javascript"> $(function(){ $("#elastic_grid_demo").elastic_grid({ 'filterEffect': 'popup', 'hoverDirection': true, 'hoverDelay': 0, 'hoverInverse': false, 'expandingSpeed': 500, 'expandingHeight': 500, 'items' : [ { 'title' : 'Title #1', 'description' : ' Description text here', 'thumbnail' : ['images/small/1.jpg', 'images/small/2.jpg'], 'large' : ['images/large/1.jpg', 'images/large/2.jpg'], 'button_list' : [ { 'title':'Demo', 'url' : 'http://bonchen.net/' }, { 'title':'Download', 'url':'http://porfolio.bonchen.net/'} ], 'tags' : ['Portrait'] }, .... ] }); }); </script>
Name | Description |
filterEffect | Specify sets like: moveup, scaleup, fallperspective, fly, flip, helix , popup |
hoverDirection | Overlay slide in on top of some thumbnails from the direction that we are coming from with the mouse. Set false to turn it off. |
hoverDelay | For hover direction |
hoverInverse | Inverse the hover direction |
expandingSpeed | The speed of open a preview when clicking on a thumbnail |
expandingHeight | Belongs to the size of the large image. In the demo, I used the image with size 500x500. If your images have 400x400, so change it to 400 |
items | Please see the photo on the previous section |
Clearfix hack by Nicolas Gallagher
Scroll effect by @hakimel
Classie - class helper functions by bonzo
Direction Aware Hover by Codrops
Thumbnail Grid with Expanding Preview by Codrops
Elastislide by Codrops