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="plugin/components/Font Awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="plugin/components/Magnific Popup/magnific-popup.css">
<link rel="stylesheet" type="text/css" 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>
<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 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>

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>

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


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>

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

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".
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,
            },
        ],
        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,
        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.

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!