January 2, 2015

Weebly Tricks #88 - JQuery Responsive and Sortable Portfolio Plugin

Posted by Domingo Tambasacan at 1/02/2015

jQuery Responsive and Sortable Portfolio Plugin for Weebly


An awesome combination of effects will greet you this new year. Sortable, responsive and classic jQuery Portfolio plugin will surely make your images more presentable. This is a special request of our Weebler Pextra. Why not give a look.






Before we begin, I would like to remind you of some important things. This is a responsive plug in and the best output can only be achieved using a responsive template on Weebly. They provide for free so no worry. Secondly, there may be issues on browser to browser so I leave the rest for you to enhance the output. This isn't a perfect tutorial but I guess it's the most appropriate as of now.

There are four things which makes this plugin a "combo" for your images. First, it is responsive. Secondly, a unique hover effects is applied to each image. Third, they can be sorted or classified. Lastly, when an image is clicked, a larger version of it will appear and a slider is presented.

Ok let's begin.


FILES NEEDED
How to use these files? Click Here!


FOOTER CODE
Where to place these codes? Click Here!


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.1.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/classie1.js"></script>
<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/elastic_grid.min.css">
    <script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/elastic_grid.encode.js"></script>
   <script type="text/javascript">
    $(function(){
        $("#elastic_grid_demo").elastic_grid({
            'filterEffect': 'popup', // moveup, scaleup, fallperspective, fly, flip, helix , popup
            'hoverDirection': true,
            'hoverDelay': 0,
            'hoverInverse': false,
            'expandingSpeed': 500,
            'expandingHeight': 500,
            'items' :
            [
                {
                    '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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/1.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/2.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/3.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/1.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/2.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/3.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/4.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/5.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/6.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/7.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/4.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/5.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/6.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/7.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/9.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/9.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/12.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/13.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/14.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/16.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/12.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/13.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/14.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/16.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/17.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/19.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/20.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/17.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/19.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/20.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/13.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/13.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/7.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/9.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/7.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/9.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/16.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/13.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/14.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/16.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/16.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/13.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/14.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/16.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/19.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/20.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/19.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/20.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/3.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/3.jpg','images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/5.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/9.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/5.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/9.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.net'}
                    ],
                    '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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/6.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/13.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/14.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/16.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/6.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/13.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/14.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/16.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/19.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/20.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/8.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/18.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/19.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/20.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/9.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/9.jpg','http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/15.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.net'}
                    ],
                    'tags'          : ['Vintage', 'Landscape']
                }

            ]
        });
    });
</script>

I know it's a bunch of codes but we will make it simpler for you to understand. First, change the red mark text with your site address(4) assuming you uploaded these files on your site.

Now, we will get a segment of the JavaScript for a single gallery which I highlighted above in yellow including the brackets and comma at the end. Below is the code I highlighted:

{
                    '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'     : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/1.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/2.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/3.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/10.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/small/11.jpg'],
                    'large'         : ['http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/1.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/2.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/3.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/10.jpg', 'http://www.jqueryscript.net/demo/Responsive-Filterable-jQuery-Portfolio-Gallery-Plugin-Elastic-Grid/images/large/11.jpg'],
                    'button_list'   :
                    [
                        { 'title':'Demo', 'url' : 'http://www.jqueryscript.net' },
                        { 'title':'Download', 'url':'http://www.jqueryscript.net'}
                    ],
                    'tags'          : ['Portrait']
                },

Now refer to these legends:
Red text - This will be the title of a single gallery.
Yellow text - The description of course.
Green text - The links of your images. These images are the thumbnails.
Blue text - Links of the images for the large version of the thumbnails.
Pink text - The name or title of your 2 buttons.
Orange text - The links of the buttons.
Violet text - The tag of this gallery. Tags are used to sort you images. It can be Portrait, Landscape, Vintage or anything.


HEADER CODE
Where to place these codes? Click Here!


These codes are optional, but I suggest to you to add them:

<style>
div#elastic_grid_demo {
margin-top: 50px !important;
}
#main-wrap .container p {
color: #999 !important;
}

@media(max-width:767px) {
#wsite-content p {
font-size: 12px !important;
}
.og-fullimg {
height: 40% !important;
width: 100% !important;
}
.elastislide-wrapper {
max-width: 300px !important;
padding-bottom: 5px !important;
}
.og-details {
width: 100% !important;
margin-top: 5px !important;
}
.elastislide-wrapper {
max-width: 300px !important;
padding-bottom: 5px !important;
}
}
@media only screen and (min-width: 321px) {
.og-close {
z-index: 999 !important;
}
}
@media only screen and (max-width: 480px){
.og-expander-inner {
padding: 10px !important;
}
}
</style>

The codes above helps you make the responsiveness accurate and be compatible to your templates own settings.


BODY CODE
Where to place these codes? Click Here!


<div id="elastic_grid_demo"></div>


CONCLUSION





Courtesy to jqueryscript.net for the images. And there are lot of them, anyway, that's a gallery for. I did my best to illustrate everything that can help you with this plugin. There are errors ofcourse and its your part to research and correct them. At any means, I will help you edit it, just post to the forum.

Thank you so much.



Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

3 comments:

  1. Thank you for all of your tutorials, they are great. My question is: is it easy to add or delete the amount of categories? ( Instead of 3 filters, add 4 or instead of the 6 items, add 8) Do you believe doing so will effect the stability?

    Thank you in advance!!!

    ReplyDelete
    Replies
    1. Hi Gee,

      Check the demo again. I add a new Tab just to test and it works. Removing will be the same. Just remember editing the whole segment of a single gallery especially the "tag". Just add if you want or remove.

      Delete
  2. how can I change the size of the image well after clicking

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top