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!

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-1.11.3.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/Waypoints/waypoints.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).

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.

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

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>

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>

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:
```

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

For example:
```

```
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">
```

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>

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>

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>

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>

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>

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
`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

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, 
        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',
        },
    }); 
    
</script>

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' );

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="video-on-grid" to the mb-open-popup element, 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 video-on-grid mb-open-popup" 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!

Media Boxes by castlecode

Including files

HTML

Specify more than 1 column to a single media box

Initializing

Thumbnails

Specify the ratio

Add SEO

Add a little extra height to the thumbnail

Thumbnail overlay

Some content

Filtering

Kinds of filters

Specify the filter

Use a select as filter

Searching

Pretty search input text field

Sorting

Sort order button

Options

Methods

DESTROY

INSERT

REFESH

RESIZE

Handy Stuff