Weebly Tricks #94 - Free HTML5 Audio Player with Playlists

Want an audio player with your Free Weebly Account? Or even better put a playlists for your favorite musics? Now you can! Thanks to one of our Weeblers for referring us this code. It has been simplified and should work on every template. Give it a try!!!

CLICK HERE FOR LIVE DEMO

---

FOOTER CODE
Where to place these codes? Click Here!

---

<script type="text/javascript">
var audio;
var playlist;
var tracks;
var current;

init();
function init(){
    current = 0;
    audio = $('audio');
    playlist = $('#playlist');
    tracks = playlist.find('li a');
    len = tracks.length - 1;
    audio[0].volume = .10;
    playlist.find('a').click(function(e){
        e.preventDefault();
        link = $(this);
        current = link.parent().index();
        run(link, audio[0]);
    });
    audio[0].addEventListener('ended',function(e){
        current++;
        if(current == len){
            current = 0;
            link = playlist.find('a')[0];
        }else{
            link = playlist.find('a')[current];  
        }
        run($(link),audio[0]);
    });
}
function run(link, player){
        player.src = link.attr('href');
        par = link.parent();
        par.addClass('active').siblings().removeClass('active');
        audio[0].load();
        audio[0].play();
}
    </script>

There is nothing to change here.

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
#playlist,audio{background:#666;width:400px;padding:20px;}
.active a{color:#5DB0E6;text-decoration:none;}
ul a{color:#eeeedd;padding:5px;display:block;}
li a:hover{text-decoration:none;}
</style>

Notes:
Red text - The color of your Audio Player.
Green text - Its width.

---

BODY CODE
Where to place these codes? Click Here!

---

    <audio id="audio" preload="auto" tabindex="0" controls="" type="audio/mpeg">
        <source type="audio/mp3" src="http://mwtdatabase.weebly.com/files/theme/Sample1.mp3">
        Sorry, your browser does not support HTML5 audio.
    </audio>
    <ul id="playlist">
        <li class="active" style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample1.mp3">Sample Music 1</a></li>
        <li style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample2.mp3">Sample Music 2</a></li>
        <li style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample3.mp3">Sample Music 3</a></li>
        <li style="background: #333"><a href="http://mwtdatabase.weebly.com/files/theme/Sample4.mp3">Sample Music 4</a></li>

    </ul>

Notes:
Red text - This is the default music link which is ready to play on the player.
Green text - You music links.
Yellow text - The title of your song.

---

CONCLUSION

---

You can actually separate the playlist from the player and set their own sizes. I really need to use inline CSS because the list styles, if not inline, will affect your navigation menus. I tested the player on my phone and seems working fine.

This tutorial uses the 10 Capsulated Tips and for questions, please use the forum.

Read More »

Weebly Tricks #93 - Animated Text Fills

Codrops has posted a new Text Animation styles which I think should be taught to Weeblers. The idea is to add effects to our text either by texture or background. They created 11 effects which is highly experimental but should work on most modern browsers. I will teach you on how to create one on this tutorial.

CLICK HERE FOR LIVE DEMO

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>

/* Main styles */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:800);

.text {
  fill: none;
  stroke-width: 6;
  stroke-linejoin: round;
  stroke-dasharray: 70 330;
  stroke-dashoffset: 0;
  -webkit-animation: stroke 6s infinite linear;
  animation: stroke 6s infinite linear;
}

.text:nth-child(5n + 1) {
  stroke: #F2385A;
  -webkit-animation-delay: -1.2s;
  animation-delay: -1.2s;
}
.text:nth-child(5n + 2) {
  stroke: #F5A503;
  -webkit-animation-delay: -2.4s;
  animation-delay: -2.4s;
}

.text:nth-child(5n + 3) {
  stroke: #E9F1DF;
  -webkit-animation-delay: -3.6s;
  animation-delay: -3.6s;
}

.text:nth-child(5n + 4) {
  stroke: #56D9CD;
  -webkit-animation-delay: -4.8s;
  animation-delay: -4.8s;
}

.text:nth-child(5n + 5) {
  stroke: #3AA1BF;
  -webkit-animation-delay: -6s;
  animation-delay: -6s;
}

@-webkit-keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}

/* Other styles */
html, body {
  height: 100%;
}
</style>
<style>
.wcustomhtml {
background: #111;
}
</style>

Notes:

Red text - This is completely optional. I just changed the background of the HTML box into black for a better output of the text. You may remove it by not including the whole red text. Or change the background color by replacing the #111 with the color of your choice.

---

BODY CODE
Where to place these codes? Click Here!

---

<svg viewBox="0 0 600 200">

  <!-- Symbol -->
  <symbol id="s-text" style="font: 10em/1 Open Sans, Impact;">
    <text text-anchor="middle"
          x="50%" y="50%" dy=".35em">
      Weebly
    </text>
  </symbol>

  <!-- Duplicate symbols -->
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>
  <use xlink:href="#s-text" class="text"
       ></use>

Notes:
Green text - The box width
Blue text - The box height
Red text - This will be the font size of your text.
Yellow text - Your message.

---

CONCLUSION

---

You might have noticed that there is no JQuery required for the above tutorial. The code has also been simplified for you to better understand and easily applied on your Weebly site. Just take note of its browser compatibility.

The above demo is only 1 among the 11 awesome samples of Codrops so you may visit the code source found on the demo page. I may help you insert the others.

Read More »

Weebly Tricks #92 - Enlarge Image within Hover

Added to our mouseover collection is an effect to enlarge image automatically within hover. The CSS3 transform property creates a very smooth effect to view an image larger. Most of all, we will only need few CSS codes without the use of JQuery. Its easy and everybody happy.

CLICK HERE FOR LIVE DEMO

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
.hovergallery img{
-webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x original size*/
-moz-transform:scale(0.8); /*Mozilla scale version*/
-o-transform:scale(0.8); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
opacity: 0.7; /*initial opacity of images*/
margin: 0 10px 5px 0; /*margin between images*/
}

.hovergallery img:hover{
-webkit-transform:scale(1.2); /*Webkit: Scale up image to 1.2x original size*/
-moz-transform:scale(1.2); /*Mozilla scale version*/
-o-transform:scale(1.2); /*Opera scale version*/
box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/
-webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/
-moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/
opacity: 1;
}
</style>
<style>
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>

Notes:

Red text - This is the initial size of you images. Change to adjust.

Green text - The transform scale of the image when you hover. The higher... the bigger.

Blue text - This makes the overflow visible specially when an image has a nearby element. You don't have to edit this code.

---

BODY CODE
Where to place these codes? Click Here!

---

<div class="hovergallery">
<img src="http://mwtdatabase.weebly.com/files/theme/diaw1.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw2.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw3.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw4.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw5.jpg" />
    <img src="http://mwtdatabase.weebly.com/files/theme/diaw6.jpg" />
</div>

Notes:
Green text - The image source.

---

CONCLUSION

---

Some people preferred simple effects for photos and this tutorial is right for them.

Ahh, before I forgot, you can also add links to your images, just post your queries on the forum. Goodluck and belated Happy Valentines Day.

Read More »

Weebly Tricks #91 - Mobile Side Menu

Checking out the latest post from Dynamicdrive.com, they got this Mobile Side Menu for us. It is powered by CSS animations with few helps of JavaScript. I edited the CSS for you to simply paste on your site. You can then add more menus on your site aside from the default and it will only show by clicking a toggle button.

CLICK HERE FOR LIVE DEMO

---

FILES NEEDED
How to use these files? Click Here!

---

• mosime.css

---

HEADER CODE
Where to place these codes? Click Here!

---

<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/mosime.css">
<style>
label {
cursor: auto !important;
}
select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
cursor: pointer !important;
}
</style>

Notes:

Red text - Change with your site address.

---

BODY CODE
Where to place these codes? Click Here!

---

<div class="mobilesidemenu">
<input type="checkbox" id="togglebox" />
<!-- Modify anything inside the NAV element -->
<nav id="msidemenu">
<h2>Site Navigation</h2>
<ul>
<li><a href="http://www.myweeblytricks.com/">Home</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Site%20Modification?max-results=6">Modification</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Image%20Effects?max-results=6">Image Effects</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Navigation%20Scripts?max-results=6">Navigation</a></li>
<li><a href="http://www.myweeblytricks.com/search/label/Widgets?max-results=6">Widgets</a></li>
</ul>

<h2>Share It</h2>
<p style="padding: 10px">Follow us on <a href="https://twitter.com/myweeblytricks">Twitter</a> or via <a href="https://www.facebook.com/myweeblytricksofficial">Facebook</a></p>

<label for="togglebox" id="navtoggler"></label>
</nav>

<div class="overlay"><label for="togglebox"></label></div>
<label class="toggler" id="maintoggler" for="togglebox"></label>
</div>

Notes:
Blue text - This is the title of your menus.
Yellow text - This will be your text/ menus.
Green text - The links respective to their text/ menu.

---

CONCLUSION

---

Aside from appearing from the left, you may also want to appear it from the right. If you want, use the forum so I can help you. Other than that, you should visit the code source.

This types of navigation menu are still important for others so I have to include it in our collections. No special tricks has been used so I hope you'll get it right.

Read More »

Weebly Tricks #90 - 3D Gallery with CSS3 and JQuery

It turns out that I am night shift again, which means I've got enough time for our site. Well, here is a simple "rotating" 3D effects to show your photos. The effects was used to preview website templates in case you're selling. If not with the selling purposes, then use your best photos for an awesome gallery.

CLICK HERE FOR LIVE DEMO

---

FILES NEEDED
How to use these files? Click Here!

---

• modernizr.custom.53451.js
• jquery.gallery.js
• 3dcss3jq.css

---

FOOTER CODE
Where to place these codes? Click Here!

---

<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.53451.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/jquery.gallery.js"></script>
<script type="text/javascript">
$(function() {
$('#dg-container').gallery({
autoplay : false
});
});
</script>

Notes:
Red text - Change with your site address.
Blue text - Change to true if you want an auto play style.

---

HEADER CODE
Where to place these codes? Click Here!

---

<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/3dcss3jq.css">
<style>
#content {
width: 1000px !important;
}
.wcustomhtml {
overflow-y: visible !important;
overflow-x: visible !important;
}
</style>

Notes:

Red text - Change with your site address.

Blue text - This is optional. The plug in needs atleast 1000px width of your site. This width is applied on the demo page.

---

BODY CODE
Where to place these codes? Click Here!

---

<section id="dg-container" class="dg-container">
    <div class="dg-wrapper">
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/3dcsjq1.jpg" alt="image01">
            <div>http://www.myweeblytricks.com/</div>
        </a>
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/3dcsjq2.jpg" alt="image01">
            <div>http://www.myweeblytricks.com/</div>
        </a>
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/3dcsjq3.jpg" alt="image01">
            <div>http://www.myweeblytricks.com/</div>
        </a>
    </div>
    <nav>
        <span class="dg-prev"><</span>
        <span class="dg-next">></span>
    </nav>
</section>

Notes:
Red text - This is the link when people click your images.
Green text - This the your image source link.
Violet text - A short image description.
Yellow text - Your text.

---

CONCLUSION

---

If you want to add more images and site adjustments, simply use the forum for queries. More options on the code source of course.

This gallery effect is simple and made possible using the 10 Capsulated Tips.

Read More »

Weebly Tricks #89 - Direction-Aware Hover Effects

I would like to create a separate tutorial for this hover effect though you have already seen it on our Sortable Portfolio. The idea is to let the hover effect follow where your mouse is coming from. The step is basic but the output is awesome and the best of it... everybody can do it.

CLICK HERE FOR LIVE DEMO

---

FILES NEEDED
How to use these files? Click Here!

---

• diaw.css
• jquery.hoverdir.js
• modernizr.custom.97074.js

---

FOOTER CODE
Where to place these codes? Click Here!

---

<link rel="stylesheet" type="text/css" href="http://mwtdatabase.weebly.com/files/theme/diaw.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://mwtdatabase.weebly.com/files/theme/jquery.hoverdir.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.97074.js"></script>
<script type="text/javascript">
$(function() {

$(' #da-thumbs > li ').each( function() { $(this).hoverdir(); } );

});
</script>

Notes:
Red text - Change with your own site address

---

HEADER CODE
Where to place these codes? Click Here!

---

<style>
.da-thumbs {
width: 910px;
height: 450px;
}
.da-thumbs li a img {
    width: 200px;
    height: 200px;
}
</style>

Notes:
Red text - The dimension of your images container.
Blue text - The size of each image.

---

BODY CODE
Where to place these codes? Click Here!

---

<ul id="da-thumbs" class="da-thumbs">
    <li>
        <a href="http://www.myweeblytricks.com/">
            <img src="http://mwtdatabase.weebly.com/files/theme/diaw1.jpg" />
            <div><span>Plant trees to save our planet.</span></div>
        </a>
    </li>
</ul>

Notes:
Red text - The link if you click a photo.
Green text - Your image source.
Yellow text - Your description.

Now to add more image, simple copy the codes from <li> to </li> and paste it after the </li>.

---

CONCLUSION

---

One of the key thing that Weeblers less likely to use is the modernizr. If you're going to remove it, then the effect won't work.

For those... still don't know the 10 Capsulated Tips, I want you to read and understand it because those tips made this plugin possible.

Read More »

Weebly Tricks #88 - JQuery Responsive and Sortable Portfolio Plugin

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.

CLICK HERE FOR LIVE DEMO

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!

---

• modernizr.custom.1.js
• classie1.js
• elastic_grid.min.css
• elastic_grid.encode.js

---

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.

Read More »