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

- latest update: 09/9/2013
- by: Vu Khanh Truong

### Installation

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

### Explanation

### The Options

# 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

### Reference Resources

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