castlecode supports this item


This author's response time can be up to 1 business day.

795 comments found.

Can you look at my page. I am trying to copy your mason grid and it’s having some graphical issues.

I noticed couple of issues:
1) the filter is not working, so replace this:

filterContainer: '#filter',
for this:
filterContainer: '.media-boxes-filter',

2) you added a CSS to reduce the width of the thumbnails, so in order to fix that add this peace of CSS:
.media-box .media-box-image img{
    width: 100% !important;
if you want to add more space between the thumbnails there are 2 JS options for that, which are the following:
horizontalSpaceBetweenBoxes: 10,
verticalSpaceBetweenBoxes: 10,
you can just set a higher value, like 30

I hope this makes sense,
Best, David

I’m having the issue with the boxes not extending the full width of the page. I tried the y-overflow: scroll and set it to !important but that didn’t fix it. Any ideas?

Thank you

Ok, so I see how to hide the “Load More” button using display: none;. But the Lazy load does not seem to be working when I scroll down the page and more boxes will not load as I scroll down. How can I hide the “Load More” and get the lazy load to work? Some of my boxes are set to display: none; as I only want rows of three to load at a time. And at the very end of the list, I don’t want any single item with empty spots next to it.

That’s really my goal. Is to have a solid grid of completely filled rows and columns even if my code has a number of items not divisible by three. Any odd items, I don’t want to show. So I am not sure if maybe my Razor Syntax is in some way preventing it from working properly.

Here is the link by the way.

the lazy load is not working for you? I just checked your site and I see it working just fine

if you want a perfect squared grid, you must add the same data-width and data-height for all the boxes, like this example:

Best, David

Filtering MediaBoxes purely via Code


I have what I think is a simple requirement: to be able to set the MediaBoxes filter via code, without any dependence on UI elements to define / control the filters.

From reviewing the docs / code / comments / mediaBoxes and isotopeMB data objects, it seems that the easiest way to control which boxes would match the filter criteria would be with CSS selectors, which is fine.

However, while the answer is surely in the code, I am hoping to avoid reverse-engineering the code or creating hidden DOM elements to implement the following to dynamically hide only the active parent element in a list of child boxes:

1. In code launched in the parent display, trigger a custom event containing the parent element id. 2. In code controlling the child (mediaboxes) grid, catch the custom event and set the grid filter to (for example) ’:not([data-fact-id=1234])’ 3. Possibly refresh the mediaBoxes grid.

Is there a JS object I can target to set the filter, or should I fake up hidden DOM elements with the filter control attributes?

this is another idea, in your media-boxes add a unique id with the factid, something like this:

<div class="media-box indoors" id="factid_18923">
    <div class="media-box-image mb-open-popup" data-src="gallery/img-36.jpg">
        <div data-width="752" data-height="500" data-thumbnail="gallery/thumbnails/thumb-36.jpg" ></div>
then when you wish to exclude a specific factid with jQuery, run the following:
var new_filter = $('<li><a href="#" data-filter=":not(#factid_18923)">Filter</a></li>');
I hope that makes sense ;)

Yes, that is almost what I was trying to write but the editor was rendering my Html literally.

Each media box already has a unique fact id attribute – not the ‘id’ attribute, but I am thinking that will not be a problem as long as I use the [] selector.

Thanks, it sounds like just creating the element with the filter rule and triggering it will trigger the filter – better than requiring a fake event handler!

Hi, couple more things I need help with please:

1. Is it possible to change the color of vimeo playback controls when the video is playing in the grid? I’ve done it for popup videos but don’t know how to do it for iframe-on-grid videos.

2. On a phone or tablet when rotating from landscape (2 columns) to portrait (one column), my grid doesn’t switch back to one column straight away as it should. It stays on 2 columns and I have to swipe/scroll up or down a little to get it to switch back to one column.


Hi, I’ll have another look at vimeo. I used to be able to set the embed colors on my vimeo videos but I don’t think you can do that with a free account any more so it might not be possible.

If you don’t mind, I’ll e-mail you an example as I have another minor issue with the popup that it would be great to get your advice on at the same time?

Thanks :)

yes please send it ;) (through my profile at the bottom there’s a contact form)

e-mail sent, thanks :).

Hi, your plugin looks awesome, downloaded it and attempted to install on wordpress.

Unfortunately I need this to work on wordpress…do you have a wp version yet?


Hi Andrew,
the WP version isn’t ready yet, but contact me via email (through my profile at the bottom there’s a contact form)

Best, David

Hello First, congratulation for this awsome plugin, i realy like it. i have a litte problem on IE 9. check out at Resize the browser window (iE9) you will see what i mean. can you help? thank you in advance

yep, same issue there

Alright, I will download a VM with IE9 here: and record a small video of isotope failing so I can ask the author and see if he knows something about this (as media boxes is based on isotope)

Sounds like a good plan :) thank you

Hi, do you think media boxes, and especially the media grid demo could be compatible with theses squares :

For desktops, and of course mobile/tablets. Could be there any potential issue display or something else?

do you mean adding those “magic squares” inside the media boxes? or just work in the same page both plugins, if so then yes ;)

Best, David

Hi, I’m using the Masonry Gallery template. Is it possible to change the number of columns to 4 instead of 3? I have multiple images that are 2 columns wide and would like to have them side by side. Thanks!

yes, you can! just pass this JS option in the JS initialization:

columns: 3,
Best, David :)

Hi David, is it possible to have different size iframe/video popups for different boxes in the same grid? Currently I’m using the following css for all popups:

.fancybox-slide--video .fancybox-iframe-wrap {
    width  : 1280px !important;
    height : 720px !important;
    max-width  : 90% !important;
    max-height : 90% !important;

I’d like some popups to be smaller. Maybe I have to assign id’s but I can’t work it out. Thanks.

Hi there,
currently I don’t see any way of passing an id to fancybox :s I will try to google it and see if I find something

Best, David


Is that possible to replace FA icons by own png (transparent) images uploaded on local host? So we don’t need to be linked with FA, or buy new icons at FA. In this case, how can we proceed or what do we have to type in the boxes sections?

Also, how to be not linked to googlefonts, so we can choose any fonts we want? Is that possible to store a chosen font on local host and load it, instead of using a G. font? If yes, how can we load them correctly from the html files, etc?


1) yes, instead of using this:

<i class="fa fa-plus mb-open-popup" data-src="gallery/img-14.jpg" data-title="Dolor sit amet"></i>
you can try using an image like this:
<img src="my_icon.png" class="mb-open-popup" data-src="gallery/img-14.jpg" data-title="Dolor sit amet" />

2) if you want to know how to import google fonts in your page this may help you out:

Best, David

Hi David, is it possible to adjust the height of the direction-bottom overlay? I would like it to cover only the bottom part of the thumbnail rather than the whole thumbnail. I’d like it to look similar to the reveal-bottom effect but have the overlay stay on top of the thumbnail rather than push the thumbnail up? Hope that makes sense! Thanks :).

currently the only way would be the following, but it will break all the other direction effects.
First add this peace of CSS:

  height: auto !important;

then open the mediaBoxes.js file find this:
'top' : 0
and replace it for this:
'top' :,true)
Best ;)

wr2k18 Purchased

Thank you it’s working great. It should be okay as I don’t need the other direction effects :).

Awesome :D

Hi David – I am having problems with images that span multiple columns and are different ratios (width & height). They are just not lining up correctly. Looking at your demo pages I wonder how I can fix this. What is the most important thing to follow to make sure the images look nice? Do all images have to have the same ratio? Do they all need to have the same width, but heigh can be different? Mind have different heights and widths. Thanks for the help.

yes, it is kind of tricky when having boxes in multiple columns, if you want a perfect squared grid, then yes the ratio should be the same, and then order the boxes in a manner that all gaps have boxes, like in the examples
Best, David

Hey! The grid works fine on desktop, but when I use safari or other browsers on my phone none of the images pops up… Here’s the link :

can you clear your browser cache and try again? I just tested on an iPhone 7 plus using Safari and it works great :D

Best, David

Hey! I managed to fix it yesterday! Thanks for your reply though!

How can I reset ALL the filters or ANY combinations of sorting filters back to the default layout?

Alright, then you can do it with this peace of Javascript:
this works in the “multiple filters” example ;)

It didn’t made any change. Can I send you the link for you look at. I placed this script to the bottom.

I answered in your other post :)

Hi there,

This is the demo I’m working on.

I was trying to figure out how to reset all filters to default when clicking “ALL”. For example.

Click on “breakfast” and then in the drop down click on “Late Nights”. Next click on the “ALL” button (not the drop down) I wanted it to show all four posts as before.

Is this possible?

Sorry. It’s not working. Or I’m not following. I believe I made the updates suggested.Not sure if I did it correctly.

Ohh I see that you added the “reset_filters” class to many elements, that’s causing that JS is going on an infinitive loop

just do the following:
1) Remove the “reset_filters” class from all HTML elements in your page
2) add this HTML (copy & paste):

<a class="reset_filters">reset

so when clicking on that “reset” link it should restore all filters to “all”

if still having issues you can contact me via email (through my profile at the bottom there’s a contact form), so you can send me your FTP details and I’ll add the example there for you

Best, David

I think this can work. I can keep “reset” as a separate button. Thanks David