Elastic Grid - Responsive Jquery Gallery Plugin

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.

Import CSS & Javascript

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>
 
 

Create HTML container

<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>

There are 3 photos will display in the grid. Please go to next section to find out more.

Play with settings

 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>

Setting parameters

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