Media Boxes by castlecode


Thank you for purchasing my theme. 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="css/magnific-popup.css">
<link rel="stylesheet" type="text/css" href="css/mediaBoxes.css">


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


<!-- Media Boxes JS files -->
<script src="js/jquery.isotope.min.js"></script>
<script src="js/jquery.imagesLoaded.min.js"></script>
<script src="js/jquery.transit.min.js"></script>
<script src="js/jquery.easing.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/modernizr.custom.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="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 version 2 and I changed the namespace.

It’s not required, but I recommend placing 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>

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>

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 data-popup="http://goo.gl/Rbi9CB"></div>

        <div class="thumbnail-overlay">
            <i class="fa fa-plus mb-open-popup"></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


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 it will look for the <a href=""></a> inside so it can uses it as the filters.

But you can change this with this two Javascript options at the JS initialization (specify a different selector).

<script>
    
    $('#grid').mediaBoxes({
        filterContainer: '#filter',
        filter: 'a',
    }); 
    
</script>

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>

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',
        sort: 'a',
    }); 
    
</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

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 and columns for different resolutions, for example if for mobile resolutions (like phones) you want to show only 1 column of media boxes you can do this here. You can have as many resolutions as you want or have none
I want an example!
filterContainer string '#filter' The HTML element that will be the container of the filters
filter string 'a' The HTML elements that will be 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
sort string 'a' The HTML elements that will be the sorters
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
waitUntilThumbLoads 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.
deepLinking boolean true Activate deep linking, 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".
gallery boolean true Enable gallery option for popup.
LoadingWord string 'Loading...' The loading word
loadMoreWord string 'Load More' The load more word
noMoreEntriesWord string 'No More Entries' The no more entries word

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,
            },
        ],
        filterContainer: '#filter',
        filter: 'a',
        search: '',
        searchTarget: '.media-box-title',
        sortContainer: '',
        sort: 'a',
        getSortData: {
          title: '.media-box-title',
          text: '.media-box-text',
        }, 
        waitUntilThumbLoads: true, 
        waitForAllThumbsNoMatterWhat: false, 
        thumbnailOverlay: true, 
        overlayEffect: 'fade', 
        overlaySpeed: 200,
        overlayEasing: 'default',
        showOnlyLoadedBoxesInPopup: false,
        considerFilteringInPopup: true, 
        deepLinking: true,
        gallery: true,
        LoadingWord: 'Loading...',
        loadMoreWord: 'Load More',
        noMoreEntriesWord: 'No More Entries',
    }); 
    
</script>

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

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>

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

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

</script>

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 data-popup div, 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="video-on-grid" data-type="iframe" data-popup="http://vimeo.com/22884674" title="Nostrud exercitation"></div>
    
    <div class="thumbnail-overlay overlay-always-visible mb-open-popup">
        <span class="fa fa-play media-box-play-button"></span>
    </div>
</div>