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

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