# Media Boxes by castlecode

Thank you for purchasing this plugin. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

# Including files

These are all the files you need to import in your page so the plugin can work.

    <!-- Media Boxes CSS files -->
    <link rel="stylesheet" href="plugin/components/Font Awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="plugin/components/Magnific Popup/magnific-popup.css"> <!-- Only if you are going to use Magnific Popup -->
    <link rel="stylesheet" href="plugin/components/Fancybox/jquery.fancybox.min.css"> <!-- Only if you are going to use fancybox -->
    <link rel="stylesheet" href="plugin/css/mediaBoxes.css">

    <!-- jQuery 1.8+ -->
    <script src="plugin/components/jQuery/jquery-3.6.0.min.js"></script>

    <!-- Media Boxes JS files -->
    <script src="plugin/components/Isotope/jquery.isotope.min.js"></script>
    <script src="plugin/components/imagesLoaded/jquery.imagesLoaded.min.js"></script>
    <script src="plugin/components/Transit/jquery.transit.min.js"></script>
    <script src="plugin/components/jQuery Easing/jquery.easing.js"></script>
    <script src="plugin/components/jQuery Visible/jquery.visible.min.js"></script>
    <script src="plugin/components/Modernizr/modernizr.custom.min.js"></script>
    <script src="plugin/components/Magnific Popup/jquery.magnific-popup.min.js"></script> <!-- Only if you are going to use Magnific Popup -->
    <script src="plugin/components/Fancybox/jquery.fancybox.min.js"></script> <!-- Only if you are going to use fancybox -->
    <script src="plugin/js/jquery.mediaBoxes.dropdown.js"></script>
    <script src="plugin/js/jquery.mediaBoxes.js"></script>

Heads up! even if you already got isotope included in your page you need to include the one that comes with the plugin since it is the latest version and I changed the namespace.

It’s not required, but I recommend placing the CSS files in `<head>` and the JavaScript files and initialization code in the footer of your site (before the closing `</body>` tag). If you already have jquery.js on your site, don’t include it a second time.

Important! Inside the `css` folder you will find an `icons` folder which contains all the icons (some needed) for the plugin so if you move the CSS files somewhere else don't forget to move the `icons` folder as well (they need to be in the same directory).

# HTML

Here is the basic HTML for the Media Boxes, you can create as many boxes as you need.

    <!-- The searching text field -->
    <input type="text" id="search" class="media-boxes-search" placeholder="Search By Title">

    <!-- The filter bar -->
    <ul class="media-boxes-filter" id="filter">
      <li><a class="selected" href="#" data-filter="*">All</a></li>
      <li><a href="#" data-filter=".category1">Category 1</a></li>
      <li><a href="#" data-filter=".category2">Category 2</a></li>
      <li><a href="#" data-filter=".category3">Category 3</a></li>
    </ul>

    <!-- The grid with media boxes -->
    <div id="grid">

        <!-- --------- MEDIA BOX MARKUP --------- -->
        <div class="media-box category1">
            I'm the first box and I belong to category 1
        </div>

        <!-- --------- MEDIA BOX MARKUP --------- -->
        <div class="media-box category2">
            Here goes some content that belong to category 2
        </div>

        <!-- --------- MEDIA BOX MARKUP --------- -->
        <div class="media-box category3">
            And I am from category 3
        </div>

    </div>

Heads up! this little example above doesn't have any image or a nice styled content, I will show you soon how to add it.

##### Specify more than 1 column to a single media box

If you want a media box to be 2 or 3 columns wide then you can define this with the `data-columns` attribute in the media box

    <!-- The grid with media boxes -->
    <div id="grid">

        <!-- --------- MEDIA BOX MARKUP --------- -->
        <div class="media-box category1" data-columns="2">
            I'm the first box and I belong to category 1
        </div>

        <!-- --------- MEDIA BOX MARKUP --------- -->
        <div class="media-box category2">
            Here goes some content that belong to category 2
        </div>

        <!-- --------- MEDIA BOX MARKUP --------- -->
        <div class="media-box category3">
            And I am from category 3
        </div>

    </div>

Important! play carefully with this option since in some resolutions you may find gaps between media boxes because it may not fit perfectly all the time.

# Initializing

Once you got the HTML markup in your site you need to initialize the plugin in Javascript.

You need to take the id from the container of the boxes in the HTML (In the example above would be: `id="grid"`) and use it for the initialization.

    <script>

        $('#grid').mediaBoxes();

    </script>

And here is where you can pass all the options available. For example:

    <script>

        $('#grid').mediaBoxes({
            boxesToLoadStart: 10,
            boxesToLoad: 8,
        });

    </script>

You can see all the options available here

# Thumbnails

Now is time to add some thumbnails to each media box.

You only need to specify the URL for the thumbnail in the `data-thumbnail` attribute. It can be from an external location or in your own server (just like if it were a `<img src="URL" />`).

This is the HTML markup for just the thumbnail.

    <div class="media-box-image">
        <div data-thumbnail="http://goo.gl/nzRWqf"></div>
    </div>

Then you can drop that peace of code inside a media box.

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-thumbnail="http://goo.gl/nzRWqf"></div>
        </div>

    </div>

#### Specify the ratio

If you specify the ratio for the thumbnails the plugin will show you the grid layout and the content right from the beginning (without having to wait until all the thumbnails are loaded). So it will feel like the plugin loads faster.

You can specify for each thumbnail that for certain width you want certain height and the plugin will cut the height for you (depending on the resolution, this works as the ratio), with the `data-width` and `data-height` attributes.

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-width="240px" data-height="140px" data-thumbnail="http://goo.gl/nzRWqf"></div>
        </div>

    </div>

#### Add SEO

For SEO (Search Engine Optimization) purposes you can add the title and alt attributes for the thumbnails, just do it as follows.

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-title="my title" data-alt="my alt" data-width="240px" data-height="140px" data-thumbnail="http://goo.gl/nzRWqf"></div>
        </div>

    </div>

#### Add a little extra height to the thumbnail

You may find a case where you may want to add a little bit of extra height to certain thumbnail, maybe to match its neighbor height. You can do it as follows, in pixels.

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1" data-extra-height="15">

        <div class="media-box-image">
            <div data-title="my title" data-alt="my alt" data-width="240px" data-height="140px" data-thumbnail="http://goo.gl/nzRWqf"></div>
        </div>

    </div>

# Thumbnail overlay

You can also add an overlay effect to the thumbnails and put anything inside (like text, links, icons, etc). This is the HTML markup for just the overlay.

    <div class="thumbnail-overlay">
        YOU CAN PUT ANYTHING HERE
    </div>

Then you need to put that code inside the div with the attribute `class="media-box-image"`

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-thumbnail="http://goo.gl/nzRWqf"></div>

            <div class="thumbnail-overlay">
                YOU CAN PUT ANYTHING HERE
            </div>
        </div>

    </div>

# Popup

The plugin is using Fancybox and the Magnific Popup so if you want to extend it you can find many support on Google.

#### What will trigger the popup

First you need to define what's going to be the trigger for the popup (what will open the popup) and all you need to do is add the class `mb-open-popup` to any element inside the `<div class="media-box">` and then specify the url for your image in that same element using the `data-src` attribute

For example if you want the thumbnail overay to be what opens the popup it would look like this:

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-thumbnail="http://goo.gl/nzRWqf"></div>

            <div class="thumbnail-overlay mb-open-popup" data-src="http://goo.gl/Rbi9CB">
                YOU CAN PUT ANYTHING HERE
            </div>
        </div>

    </div>

Or maybe you want an icon inside the thumbnail overlay to be the trigger for the popup, if so it would look like this:

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-thumbnail="http://goo.gl/nzRWqf"></div>

            <div class="thumbnail-overlay">
                <i class="fa fa-plus mb-open-popup" data-src="http://goo.gl/Rbi9CB"></i>
            </div>
        </div>

    </div>

Heads up! in one single `media-box` you can have several popup triggers with its own `data-src`

#### Content types

By default, the popup has 4 types of content: `image`, `iframe`, `inline`, and `ajax`. There is no any “auto-detection” of type based on URL, so you should define it manually.

Heads up! If you don't specify a content type the plugin will set the type to `image` and try to load the URL specified as an image.

You need to specify the content type with the `data-type` attribute, for example for a youtube video the content type is `data-type="iframe"` and it would look like this:

    <i class="fa fa-plus mb-open-popup" data-type="iframe" data-src="https://www.youtube.com/watch?v=uf8Fwiy0Bkc"></i>

##### 1. Image type

I already explained how to specify the URL for an image in the "Specify the URL" section, you don't need to specify the type since `data-type="image"` is the default, so just put the path of the image.

##### 2. Iframe type

Here is where you can specify an iframe URL, such as videos (like Youtube and Vimeo), sounds (like Soundcloud), and more.

- Youtube

  For Youtube videos you only need the url in the address bar of your browser (just with the `v=2fngvQS_PmQ` parameter don't add the extra parameters).

  For example:

      <i class="fa fa-plus mb-open-popup" data-type="iframe" data-src="https://www.youtube.com/watch?v=uf8Fwiy0Bkc"></i>

- Vimeo

  For Vimeo is the same as the youtube videos, just copy and paste the URL of a single video

  For example:

      <i class="fa fa-plus mb-open-popup" data-type="iframe" data-src="http://vimeo.com/22884674"></i>

- More

  You only need the iframe URL, for example if you want a sound from SoundCloud they got an option on each sound named "share" just click it and then select "Embed" in there you will find an `iframe`, just copy what is inside the `src="iframe-url"` attribute and paste it as the `data-src`.

  For example (usually is a long URL):

      <i class="fa fa-plus mb-open-popup" data-type="iframe" data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/123844205&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></i>

##### 3. Inline type

Here you can display HTML from your site in the popup

To create the popup from an inline element you need to:

1) Create a HTML element that you wish to display in popup and add it somewhere. The class `mfp-hide` is required to hide the popup from the page.

    <div id="test-popup" class="white-popup mfp-hide">
      Popup content
    </div>

2) Style this element. The popup by default doesn’t apply any styles to it, except vertical centering. Close button will be automatically appended inside.

    .white-popup {
      position: relative;
      background: #FFF;
      padding: 20px;
      width: auto;
      max-width: 500px;
      margin: 20px auto;
    }

3) Specify in the `data-src` attribute the CSS id of the element you want to show in the popup (#test-popup in our case).

    <i class="fa fa-plus mb-open-popup" data-type="inline" data-src="#test-popup"></i>

##### 4. Ajax type

To create such type of popup, first define the path to the file that you wish to display and select ajax type of the popup. Popup itself should be styled in exactly the same way as an inline popup type.

    <i class="fa fa-plus mb-open-popup" data-type="ajax" data-src="path-to-file.html"></i>

Heads up! The path to the file that will be loaded should have the same origin (e.g. be on the same domain).

##### Define a title

You can add a title so it can be shown in the popup below the content, just add the `title="some title"` attribute.

    <i class="fa fa-plus mb-open-popup" data-src="http://goo.gl/Rbi9CB" data-title="some title"></i>

# Some content

You can also add some content on each media box (besides the thumbnail) like some text, links, buttons or any HTML. You can just drop whatever you want inside the media boxes and give some CSS style to it.

I have added as part of the plugin some CSS styled content so you don't start from scratch and see what you can do, and this is the HTML markup for a nice content:

    <div class="media-box-content">
        <div class="media-box-title">Lamborghini "Aventador"</div>
        <div class="media-box-date">December 10, 2013</div>
        <div class="media-box-text">
            Lorem ipsum dolor sit amet psico dell consecteture adipisicing elit. Adipisci, fugit, eveniet, ut exercitationem.
        </div>
        <div class="media-box-more"> <a href="#">Read More</a> </div>
    </div>

Heads up! the CSS classes used here don't contain any JS logic behind, it is just for CSS styling, nothing else.

Now you can drop this HTML markup inside a media box, usually this content is placed below the thumbnail like this:

    <!-- --------- MEDIA BOX MARKUP --------- -->
    <div class="media-box category1">

        <div class="media-box-image">
            <div data-thumbnail="http://goo.gl/nzRWqf"></div>

            <div class="thumbnail-overlay">
                <i class="fa fa-plus mb-open-popup" data-src="http://goo.gl/Rbi9CB"></i>
            </div>
        </div>

        <div class="media-box-content">
            <div class="media-box-title">Lamborghini "Aventador"</div>
            <div class="media-box-date">December 10, 2013</div>
            <div class="media-box-text">
                Lorem ipsum dolor sit amet psico dell consecteture adipisicing elit. Adipisci, fugit, eveniet, ut exercitationem.
            </div>
            <div class="media-box-more"> <a href="#">Read More</a> </div>
        </div>

    </div>

# Filtering

The simplest way to filter items is with selectors, like CSS classes. For example, each meda box can have several identifying CSS classes: `category1`, `category2`, `category3`, etc.

    <!-- The grid with media boxes -->
    <div id="grid">

        <div class="media-box category1">THE CONTENT</div>
        <div class="media-box category2">THE CONTENT</div>
        <div class="media-box category1 category3">THE CONTENT</div>
        <div class="media-box category2 category3">THE CONTENT</div>
        <div class="media-box category3">THE CONTENT</div>
        <div class="media-box category1 category2 category3">THE CONTENT</div>

    </div>

Then you target those CSS selectors with the `data-filter` attribute in the filter bar. You can put the filter bar anywhere in your site.

    <!-- The filter bar -->
    <ul class="media-boxes-filter" id="filter">
      <li><a class="selected" href="#" data-filter="*">All</a></li>
      <li><a href="#" data-filter=".category1">Category 1</a></li>
      <li><a href="#" data-filter=".category2">Category 2</a></li>
      <li><a href="#" data-filter=".category3">Category 3</a></li>
      <li><a href="#" data-filter=".category1, .category2">Category 1 and 2</a></li>
      <li><a href="#" data-filter=":not(.category2)">not Category 2</a></li>
      <li><a href="#" data-filter=".category3:not(.category2)">Category 3 but not Category 2</a></li>
    </ul>

As you can see by default the `All` option is selected since it has the `class="selected"`, but you can change that just by moving the `class="selected"` to another filter.

##### Kinds of filters

You can make all kind of complicated filters

- `"*"` will show all media boxes.
- `".category1"` will show only the media boxes with the class `.category1`.
- `".category1, .category2"` will show `.category1` and `.category2` media boxes.
- `".category1.category2"` will show media boxes that have both `.category1` and `.category2` classes.
- `":not(.category2)"` will show all media boxes except `.category2`
- `".category3:not(.category2)"` will show the `.category3` that don't have `.category2`

##### Specify the filter

By default the plugin will go ahead and look for an element with the `id="filter"` in order to use it as the container of the filters, then inside it will look for the elements with `data-filter` attribute so it can uses it as the filters.

But you can change the filter container with this Javascript option at the JS initialization (specify a different selector).

    <script>

        $('#grid').mediaBoxes({
            filterContainer: '#filter',
        });

    </script>

##### Use a select as filter

You can use a select with options to filter the grid, just checkout the following HTML markup for it

    <select id="filter">
      <option class="selected" checked data-filter="*">All</option>
      <option data-filter=".red">Red</option>
      <option data-filter=".green">Green</option>
      <option data-filter=".blue">Blue</option>
    </select>

# Searching

First you must add an input text field so you can type what you want to search.

    <input type="text" id="search" class="media-boxes-search" placeholder="Search By Title">

Second you must target what element you want to search, for example if you want to target just the title in the example below you would do it like this `.media-box-title`

    <!-- The grid with media boxes -->
    <div id="grid">

        <div class="media-box">
            <div class="media-box-title">Blur</div>
            THE CONTENT
        </div>
        <div class="media-box">
            <div class="media-box-title">Architecture</div>
            THE CONTENT
        </div>
        <div class="media-box">
            <div class="media-box-title">Farm House</div>
            THE CONTENT
        </div>
        <div class="media-box">
            <div class="media-box-title">Plant</div>
            THE CONTENT
        </div>
        <div class="media-box">
            <div class="media-box-title">Madness Boat</div>
            THE CONTENT
        </div>
        <div class="media-box">
            <div class="media-box-title">Village</div>
            THE CONTENT
        </div>

    </div>

Heads up! In this example the plugin will only search in the elements with the class "media-box-title" and decide what media boxes to show.

And finally specify the input text field and the target of your desired in the Javascript initialization.

    <script>

        $('#grid').mediaBoxes({
            search: '#search',
            searchTarget: '.media-box-title',
        });

    </script>

##### Pretty search input text field

The plugin comes with a default search input text field, which has a search icon and a clear icon, you can use it just by doing the following HTML markup

    <div class="media-boxes-search">
        <span class="media-boxes-icon fa fa-search"></span>
        <input type="text" id="search" placeholder="Search by title">
        <span class="media-boxes-clear fa fa-close"></span>
    </div>

# Sorting

First you must target what element you want to sort by, for example if you want to sort by the title and the text you would target `.media-box-title` and `.media-box-text`

    <!-- The grid with media boxes -->
    <div id="grid">

        <div class="media-box">
            <div class="media-box-title">Blur</div>
            <div class="media-box-text">THE TEXT</div>
        </div>
        <div class="media-box">
            <div class="media-box-title">Architecture</div>
            <div class="media-box-text">THE TEXT</div>
        </div>
        <div class="media-box">
            <div class="media-box-title">Farm House</div>
            <div class="media-box-text">THE TEXT</div>
        </div>
        <div class="media-box">
            <div class="media-box-title">Plant</div>
            <div class="media-box-text">THE TEXT</div>
        </div>
        <div class="media-box">
            <div class="media-box-title">Madness Boat</div>
            <div class="media-box-text">THE TEXT</div>
        </div>
        <div class="media-box">
            <div class="media-box-title">Village</div>
            <div class="media-box-text">THE TEXT</div>
        </div>

    </div>

Second you must define the `getSortData` Javascript option with the targets you chose in the step before.
You will define keywords that will be use to sort by and its values that will the HTML element that you want the plugin to take into consideration.
For example:

    $('#grid').mediaBoxes({
        getSortData: {
            title: '.media-box-title', //When you sort by title, it will only look in the elements with the class "media-box-title"
            text: '.media-box-text', //When you sort by text, it will only look in the elements with the class "media-box-text"
        },
    });

Third define the sorting drop down specifying the sorting keys in the `data-sort-by` attribute.

    <!-- The sorting drop down -->
    <div class="media-boxes-drop-down" id="sort">
        <div class="media-boxes-drop-down-header">
        </div>
        <ul class="media-boxes-drop-down-menu">
            <li><a class="selected" href="#" data-sort-by="original-order">Original Order</a></li>
            <li><a href="#" data-sort-by="title">Sort by Title</a></li>
            <li><a href="#" data-sort-by="text">Sort by Text</a></li>
        </ul>
    </div>

Heads up! the key `original-order` is for the default order, and you don't need to specify it in the `getSortData` option.

You can change the direction of the sorting (ascending or descending) and also if you which to toggle them. You need to use the `data-sort-ascending="false"` and `data-sort-toggle="true"` attribute, for example

    <li><a href="#" data-sort-by="title" data-sort-ascending="false" data-sort-toggle="true">Sort by Title</a></li>

And finally specify the sorting drop down in the Javascript initialization.

    <script>

        $('#grid').mediaBoxes({
            sortContainer: '#sort',
        });

    </script>

Important! The sorting may not apply correctly in the media boxes that are 2 ore more columns wide (Isotope Logic).
Heads up! You can a more complex sorting, just use any sorting provided by Isotope v2

##### Sort order button

Also you can have a button that sets the sort order, you will need the following HTML markup, and if you do this the `data-sort-ascending="false"` and `data-sort-toggle="true"` attributes will be ignored

    <div class="media-boxes-sort">
        <div class="media-boxes-drop-down" id="sort">
            <div class="media-boxes-drop-down-header"></div>
            <ul class="media-boxes-drop-down-menu">
                <li><a href="#" data-sort-by="original-order" class="selected">Original Order</a></li>
                <li><a href="#" data-sort-by="title">Sort by Title</a></li>
                <li><a href="#" data-sort-by="categories">Sort by Categories</a></li>
            </ul>
        </div>

        <div class="media-boxes-sort-order">
            <span class="fa fa-chevron-up selected" data-sort-ascending="true"></span>
            <span class="fa fa-chevron-down" data-sort-ascending="false"></span>
        </div>
    </div>

# Options

Here you can see all the JS options available for the media boxes.

Option | Type | Default | Description
--- | --- | --- | ---
`boxesToLoadStart` | number | 8 | The number of boxes to load when it first loads the grid
`boxesToLoad` | number | 4 | The number of boxes to load when you click the load more button or when the "lazzy load" mode is triggered
`lazyLoad` | boolean | true | When you reach the bottom of the grid the plugin will try to load more media boxes (The bottom of the grid must hit the bottom of your browser window)
`horizontalSpaceBetweenBoxes` | number | 15 | The horizontal space between media boxes
`verticalSpaceBetweenBoxes` | number | 15 | The vertical space between media boxes
`columnWidth` | string or number | 'auto' | The width of each column, if you set it to 'auto' it will use the `columns` option instead
`columns` | number | 4 | This will only work if you set the `columnWidth` to 'auto' and it is the number of columns you wish to display in the grid so it can adapt to its container automatically
`resolutions` | array | click me | Here you define the `columnWidth`, the `columns`, the `horizontalSpaceBetweenBoxes` and the `verticalSpaceBetweenBoxes` for different resolutions, for example if for mobile resolutions (like phones) you want to show only 1 column of media boxes this is the place to configure it. You can have as many resolutions as you want or have none I want an example!
`multipleFilterLogic` | string | 'AND' | It can be 'AND' or 'OR' depending on how you wish to combine the filters when you are using multiple
`filterContainer` | string | '#filter' | The HTML element that will be the container of the filters
`search` | string | '' | The HTML element that will be the input text field
`searchTarget` | string | '.media-box-title' | The HTML elements that will be the target of the search feature
`sortContainer` | string | '' | The HTML element that will be the container of the sorter
`getSortData` | string | click me | The sorting keys and values
`minBoxesPerFilter` | number | 0 | This is the minimum of media boxes per filter. If the number of boxes in a filter is less than the number specified here it will try to load more boxes from that filter category
`waitUntilThumbWithRatioLoads` | boolean | true | When the thumbnails got the ratio specified, if it's set to true it will wait until the thumbnail is loaded (showing a progress wheel) and then show the thumb, if not you will see the progress as it gets loaded
`waitForAllThumbsNoMatterWhat` | boolean | false | Even if the thumbnails got the ratio specified wait until all of them are loaded in order to show the grid layout and the content
`noEmptySpaceOnThumbWithRatio` | boolean | true | Make thumbnail automatically adapt to the 100% of its container (so no black space)
`thumbnailOverlay` | boolean | true | Show the thumbnail overlay?
`overlayEffect` | string | 'fade' | The overlay effect All the overlay effects!
`overlaySpeed` | number | 200 | The speed of the overlay effect
`overlayEasing` | string | 'default' | The easing of the overlay effect All the easing effects!
`showOnlyLoadedBoxesInPopup` | boolean | false | In the popup show only the boxes that are loaded in the grid. It needs to be set to `false` for deeplinking.
`considerFilteringInPopup` | boolean | true | The popup take in consideration the filter, so it shows only boxes from the filter specified.
`deepLinkingOnPopup` | boolean | true | Activate deep linking for the popup, for a correct functionality you need to set to `false` the option showOnlyLoadedBoxesInPopup and also set an `id` to the grid container, for example `id="grid"`.
`deepLinkingOnFilter` | boolean | true | Activate deep linking for the filter, for a correct functionality you need to set to `false` the option showOnlyLoadedBoxesInPopup and also set an `id` to the grid container, for example `id="grid"`.
`deepLinkingOnSearch` | boolean | false | Activate deep linking for the search, for a correct functionality you need to set to `false` the option showOnlyLoadedBoxesInPopup and also set an `id` to the grid container, for example `id="grid"`.
`LoadingWord` | string | 'Loading...' | The loading word
`loadMoreWord` | string | 'Load More' | The load more word
`noMoreEntriesWord` | string | 'No More Entries' | The no more entries word
`popup` | string | 'fancybox' | Which popup you are going to use, either `'fancybox'` or `'magnificpopup'`
`magnificpopup` | array | check options below | The options you can use when using Magnific Popup
`fancybox` | array | check options below | The options you can use when using Fancybox
`animation_on_thumbnail_overlay_hover` | array | check options below | animation for the items inside the thumbnail-overlay when you put the mouse over the thumbnail-overlay. You can use any of the following: `zoom-out` `zoom-in` `from-top` `from-bottom` `from-left` `from-right`

You can pass all the options to the `mediaBoxes` JS function like this (these are the default values)

    <script>

        $('#grid').mediaBoxes({
            boxesToLoadStart: 8,
            boxesToLoad: 4,
            minBoxesPerFilter: 0,
            lazyLoad: true,
            horizontalSpaceBetweenBoxes: 15,
            verticalSpaceBetweenBoxes: 15,
            columnWidth: 'auto',
            columns: 4,
            resolutions: [
                {
                    maxWidth: 960,
                    columnWidth: 'auto',
                    columns: 3,
                },
                {
                    maxWidth: 650,
                    columnWidth: 'auto',
                    columns: 2,
                },
                {
                    maxWidth: 450,
                    columnWidth: 'auto',
                    columns: 1,
                },
            ],
            multipleFilterLogic: 'AND',
            filterContainer: '#filter',
            search: '',
            searchTarget: '.media-box-title',
            sortContainer: '',
            getSortData: {
              title: '.media-box-title',
              text: '.media-box-text',
            },
            waitUntilThumbWithRatioLoads: true,
            waitForAllThumbsNoMatterWhat: false,
            noEmptySpaceOnThumbWithRatio: true,
            thumbnailOverlay: true,
            overlayEffect: 'fade',
            overlaySpeed: 200,
            overlayEasing: 'default',
            showOnlyLoadedBoxesInPopup: false,
            considerFilteringInPopup: true,
            deepLinkingOnPopup: true,
            deepLinkingOnFilter: true,
            deepLinkingOnSearch: false,
            LoadingWord: 'Loading...',
            loadMoreWord: 'Load More',
            noMoreEntriesWord: 'No More Entries',
            popup: 'fancybox', // fancybox, magnificpopup, none
            magnificpopup:  {
                gallery: true,
                alignTop: false,
                preload: [0,2],
            },
            fancybox :  {
                loop                : false, // Enable infinite gallery navigation
                margin              : [44, 0], // Space around image, ignored if zoomed-in or viewport smaller than 800px
                keyboard            : true, // Enable keyboard navigation
                arrows              : true, // Should display navigation arrows at the screen edges
                infobar             : false, // Should display infobar (counter and arrows at the top)
                toolbar             : true, // Should display toolbar (buttons at the top)
                buttons             :   [ // What buttons should appear in the top right corner.
                                            'slideShow',
                                            'fullScreen',
                                            'thumbs',
                                            'close'
                                        ],
                idleTime            : 3, // Detect "idle" time in seconds
                protect             : false, // Disable right-click and use simple image protection for images
                animationEffect     : 'zoom', // Open/close animation type, it could be: false, 'zoom', 'fade', 'zoom-in-out'
                animationDuration   : 330, // Duration in ms for open/close animation
                transitionEffect    : 'fade', // it could be: false, 'fade', 'slide', 'circular', 'tube', 'zoom-in-out', 'rotate'
                transitionDuration  : 330, // Duration in ms for transition animation
                slideShow           : { autoStart : false, speed : 4000 }, // slideshow settings
                fullScreen          : { autoStart : false, }, // activate or deactivate fullscreen when open
                thumbs              : { autoStart : false, hideOnClose : true },    // Display thumbnails on opening/closing
                touch               : { vertical : true, momentum : true }, // Allow to drag content
                compensateScrollbar : '.fancybox-compensate-for-scrollbar',
            },
            animation_on_thumbnail_overlay_hover : [
                { item : '.fa', animation : 'zoom-out' } // zoom-out, zoom-in, from-top, from-bottom, from-left, from-right
            ],
        });

    </script>

# Methods

Heads up! This section is for advanced customers that have some understanding of Javascript/jQuery.

##### DESTROY

The following method will destroy the grid and put everything back as it was before it was initialized by the JS of the Media Boxes. In other words, it will put all the original HTML back as it was before the plugin started.

     $('#grid').mediaBoxes( 'destroy' );

##### INSERT

Sometimes customers want to bring more boxes via Ajax or integrate Infinite scroll or some other purpose.

So here I will show you how to add media boxes to the grid outside the plugin with Javascript

So here is the little snippet, pretty simple isn't?

    <button>LOAD MORE MEDIA BOXES!</button>

    <script>

        $('#grid').mediaBoxes();

        $('button').on('click', function(){
            var box =   '<div class="media-box Category1">'+
                            'THE CONTENT'+
                        '</div>';

            $('#grid').mediaBoxes( 'insert', $(box), function(){
                alert('Boxes Added!');
            });
        });

    </script>

##### REFESH

Refresh the layout of the grid, for example if you add more text to a media-box and run this line of JS it will layout the boxes accordingly.

     $('#grid').mediaBoxes( 'refresh' );

##### RESIZE

If you are doing some advance adjustments, like setting a new width for the grid, you would need to run this method so the layout and all adjustments are recalculated.

     $('#grid').mediaBoxes( 'resize' );

# Handy Stuff

If you want the overlay of an image to stay always visible (not only when you put the mouse over) then add the class of `overlay-always-visible`, it would looke like this:

    <div class="thumbnail-overlay overlay-always-visible">
        <div class="media-box-title">Psico dell</div>
        <div class="media-box-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit culpa repellat sit reiciendis.
        </div>
    </div>

If you want to align the text inside the thumbnail-overlay div, then use this CSS class `overlay-text-left` or this one `overlay-text-right`, for example:

    <div class="thumbnail-overlay overlay-always-visible overlay-text-left">
        <div class="media-box-title">Psico dell</div>
        <div class="media-box-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit culpa repellat sit reiciendis.
        </div>
    </div>

If you want your Youtube/Vimeo videos (iframe based) to load right in the grid, instead of in the popup, then do it like you do for the popup, and then just add this class `class=" iframe-on-grid"` instead of the mb-open-popup class, for example:

    <div class="media-box-image">
        <div data-width="590" data-height="332" data-thumbnail="https://i.vimeocdn.com/video/148596367_590x332.jpg"></div>

        <div class="thumbnail-overlay  iframe-on-grid" data-type="iframe" data-popup="http://vimeo.com/22884674">
            <span class="fa fa-play media-box-play-button"></span>
        </div>
    </div>

Heads up! just make sure that the `mb-open-popup` element is inside the `media-box-image` div, if its outside it may cause bugs!

### Resolutions

[
{
maxWidth: 960,
columnWidth: 'auto',
columns: 3,
},
{
maxWidth: 650,
columnWidth: 'auto',
columns: 2,
horizontalSpaceBetweenBoxes: 10,
verticalSpaceBetweenBoxes: 10,
},
{
maxWidth: 450,
columnWidth: 'auto',
columns: 1,
horizontalSpaceBetweenBoxes: 10,
verticalSpaceBetweenBoxes: 10,
},
]

### For example if you got this!

    [
        {
            maxWidth: 960,
            columnWidth: 'auto',
            columns: 4,
            horizontalSpaceBetweenBoxes: 5,
            verticalSpaceBetweenBoxes: 5,
        },
    ]

It means that if the width of the browser window (including the scroll bar) is 960 pixels or less the `columnWidth` will be 'auto', you will have 4 `columns` and 5px of space between your boxes

### All the overlay effects!

    'push-up'
    'push-down'
    'push-up-100%'
    'push-down-100%'
    'reveal-top'
    'reveal-bottom'
    'reveal-top-100%'
    'reveal-bottom-100%'
    'direction-aware'
    'direction-aware-fade'
    'direction-right'
    'direction-left'
    'direction-top'
    'direction-bottom'
    'fade'

### All the easing effects!

    'default'
    'easeInCubic'
    'easeOutCubic'
    'easeInOutCubic'
    'easeInCirc'
    'easeOutCirc'
    'easeInOutCirc'
    'easeInExpo'
    'easeOutExpo'
    'easeInOutExpo'
    'easeInQuad'
    'easeOutQuad'
    'easeInOutQuad'
    'easeInQuart'
    'easeOutQuart'
    'easeInOutQuart'
    'easeInQuint'
    'easeOutQuint'
    'easeInOutQuint'
    'easeInSine'
    'easeOutSine'
    'easeInOutSine'
    'easeInBack'
    'easeOutBack'
    'easeInOutBack'

### getSortData

    {
        title: '.media-box-title',
        text: '.media-box-text',
    },