Discussion on Media Boxes Portfolio - Responsive jQuery Grid Plugin


castlecode supports this item


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

878 comments found.

I bought the media boxes and am trying to create a responsive portfolio and can’t can you please help?

Hi there,
Yes of course, did you buy the Wordpress version? You can contact me privately via email (through my profile at the bottom there’s a contact form)

thanks for the provided support!

you’re welcome :D

Hi , is there any admin panel to mange the contents… in this script..

Unfortunately there’s not, this is a pure HTML plugin :)

Hello. Is there any Php Code ? Do you have any script like this one with an administration feature for ex. Regards

I don’t have a plugin with an admin panel (only the WP version but you would have to use WP)

You can read the difference between my gallery plugins in my profile (just scroll a little bit)

I hope this makes sense :)

Hi, we have implemented your media boxes on a (private) photo sharing site (intended for our clients customer). The performance is pretty bad right now. We have 20.000 + photo’s in the setup and loading the initial view takes 46,14 seconds to load the 14,3Mb of HTML content. The images are lazy loaded…the HTML is not. Opening the fancybox from an image takes ages as well. In this case not only all HTML for thumbs are loaded, but also every image is loaded as a thumb, but with full size.

This off course is a non acceptable performance for our client. Can you point us in the direction of a solution?

Hi dear customer,
Wow yes, that’s indeed not acceptable for a loading time.

Can you please contact me privately via email here:

Best, David


I bought this template and I like it a lot. I chose fancybox to see the big images but I would like to change the arrows icon and I do not know how to do it …

I saw that there is a url in image / svg + xml and I do not understand how to do it:

background-image: url (data: image / svg + xml; base64, PHN2ZyBmaWxsPSIjRkZGRkZGIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMjQgMjQiIHdpZHRoPSI0OCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4gICAgPHBhdGggZD0iTTAgMGgyNHYyNEgweiIgZmlsbD0ibm9uZSIvPiAgICA8cGF0aCBkPSJNMTIgNGwtMS40MSAxLjQxTDE2LjE3IDExSDR2MmgxMi4xN2wtNS41OCA1LjU5TDEyIDIwbDgtOHoiLz48L3N2Zz4 =);

I would like the arrows as in magnific popup, example <>

thank you!!

I’m glad you like it :D
I’m currently on vacations, I’ll be back on 2 days so I can’t be of much help at the moment.

But about your issue, you can try doing it as a normal background image (instead of using the svg way that fancybox is using), and then you may need to tweak the css a bit to center your new image icon

I’ll be happy to help you more once I get back :)


I solved this way by associating an image with css: .fancybox-arrow: after { satisfy:””; position: absolute; top: 28px; width: 44px; height: 44px; background-color: rgba (30, 30, 30, 0); background: url (’../ img / icon-arrow-right.png’) 50% 50% no-repeat! important; background-repeat: no-repeat; background-position: 50%; background size: 24px 24px }

Thank you !!

Awesome :D thanks for sharing!

Im curious if there is an easy way through the settings to prevent the gallery from loading more automatically after it loads. For example Having it only load when the user clicks [Load More]. Is this specified within the documentation? I did not find anything that worked for this.

Hi there,
yes, this can be done, there’s one JS option for this named “lazyLoad”, just set it to false, like this:

lazyLoad : false,
Best, David

Thank you! I accidentally tried this setting but with lazyLoad : true

glad it worked out :)


I have looked and searched through the comments and could not see anyone asking this, but sorry if this is a repeat.

On the Fancybox popup it uses the “data-src” images for the thumbnails, and not the “data-thumbnail” image. Other than load time and data issues I’m using a different image for the thumb and large image.

Is there anyway to make the fancybox thumbs use “data-thumbnail” for its thumbnails.

I’m guessing you are referring to the thumbnail in the popup right? if so then you can specify it by adding the data-thumb attribute next to the data-src attribute for the popup, like this:

<div class="media-box-image mb-open-popup" data-src="gallery/img-36.jpg" data-thumb='gallery/thumbnails/thumb-1.jpg'>
this data-thumb attribute is only used by Fancybox as “thumbnail”

I hope this makes sense,
Best, David

Perfect! I knew there had to be a simpler solution to the problem. thanks again

I am interested in buying this plug in. But want to know if it is possible to have multiple images (Gallery) on popup for one image.

yes, this is possible with a little JS modification, once you buy it you can contact me via email here: so I can tell you how

Best, David


MoeSaeed Purchased

Hello, Can I pay for some customization? Image/YouTube gallery with caption & filter & search?

yes, I do small customizations, you can contact me privately via email here: so you can tell me what do you need exactly

Best, David

Hi, I absolutely love this plugin. I know I purchased this plugin a long time ago, but it works so well and the html website almost never needs updates. On my client’s project we want to make some changes – we want to implement the option that when you click a box on the grid, a slideshow for that project shows up. I’m thinking what I will do is make them all HTML popup boxes, and embed a slideshow there. Any advice how I could go about that? I want to avoid getting another plugin for the slideshow. I will renew support if needed, thanks :)

so it would be a slideshow of images per box? if so then yes it is possible to tweak the plugin in order to do this (have multiple images per box, instead of just one)

if this is what you are looking for you can contact me via email here:
also don’t forget to renew your support period :)

Best, David

I have a pre-sale question: Can the thumbnails in the MediaBoxes gallery/portolio have the option to open a lightbox with a larger image preview (as is mostly implemented in the examples) but at the same time also have a link (maybe via a text title and or description on hover) that would link to the single portfolio item HTML page when the text title is clicked?

yes, that’s totally possible, check this example: when you place your mouse over the first thumbnail you will see 2 icons, the first one will open the lightbox and the second one can be used to link to a different page.

another example is this one: the “more details” button can be used to link to a different page as well

I hope this makes sense :)

Thanks for the quick response – very much appreciated. One more question I have: Can I specify how many thumbnails show up on initial page load and then how many files would be loaded with each press of the ‘Load more’ button? Currently I think additional thumbnails load in on page scroll in the examples.

yes that’s also possible, you will have 2 options for this:
boxesToLoadStart: 10, // when the page first loads
boxesToLoad: 6, // each time the load more button is pressed (or by lazy load)
Best, David

Hi David, thanks for the great support and a smartly set up plugin!

you’re welcome! happy to help :D

Hi David,

sorry for another question but one more functionality I would need is the ability to activate a specific filter through an external link – for example if I have a grid with Cat 1, Cat 2, Cat 3 I like to activate for example the Cat 2 with an external link.

I see that this is implemented in the “Media Grid” version of the plugin (...URL#(grid|filter)=.Category1;) – it works but it loads a different number of items depending on the method used. If I use the external link (...URL#(grid|filter)=.Category1;) 3 items are loaded – but when I access via the buttons say then clicking on Category 2 and then again clicking the Category 1 button it loads 6 items at that time. So there seems to be a discrepancy of the number of items loaded via the URL or on button press.

I also checked if external linking is possible with another example say “Masonry Gallery” by adding ”#(grid|filter)=.indoors;” to the end of the URL but here the external activation of the filter does not seem to work.

If you could check on the discrepancy of items loaded (URL vs. button press) and if the URL query to activate filters is something that works for all examples or only specific ones that would be greatly appreciated.

1) Yes, when you go directly to Category 1 via URL it doesn’t load images only from that category, it actually loads images from “all” and then just filter them! but there’s an option named “minBoxesPerFilter” and this is what it does:
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

2) Accessing filters via URL its an option named “deeplinking” and this option is activated in just some of the examples, its not activated in the “Masonry Gallery” example, but it is in the “Media Grid” you can choose where to activate this

Best, David

Thank you for the tailored answer- that covers it :)

awesome ;)

Hi, is there anyway that I can display the navigation arrows for longer? They fade out after a few seconds. Granted, if the mouse moves they display again but I would like them to display for longer if possible as if the mouse does not move and is clicked after the arrows have faded out then the image closes.

Thank you for your help : )

Hello Darren,
you can extend the idle time with this JS setting:

fancybox : { idleTime : 10, /* Detect "idle" time in seconds */ },
I hope it makes sense ;)

Best, David

Perfect. Sorry! I found the necessary code, it’s all commented already, I was searching around online for a solution when it was right in front of me the whole time. Very well documented and lovely code. Thank you very much for your help : )

thank you :D I’m happy to hear that


amacao Purchased


Hello, how can i change the filter button color ? It’s red by default. Thanks!

You can do it with this peace of CSS:>li>a.selected {
    background: blue !important;
Best, David