Discussion on Media Boxes Portfolio - jQuery Grid Gallery Plugin

Discussion on Media Boxes Portfolio - jQuery Grid Gallery Plugin

Cart 3,516 sales

castleplugins supports this item


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

1037 comments found.


teeee Purchased

Awesome plugin! Is there a way to prepend an image with the insert function, rather than append it to the end of the gallery? Thanks.

Thank you :)
Unfortunately the plugin doesn’t have a prepend function/method at the moment

Best, David

Hi … I accidently bought the html-version of the Plugin instead the WP-version … What can I do to change the product and the licence? Yours, Robert

Hi Robert,
I sent you an email reply :)

Hello again David,

Among the examples listed at the Media Boxes demo site, there is the DARK GRID. How do I create such a thing?

I imported both the dark grid portfolio and the corresponding skin from the examples provided in the package, but have no clue how to combine tiles of various types together (title with excerpt, icon with link, photos…)

Seems like you are combining different skins within one portfolio? What’s the trick I am missing here? :)

Thank you,


Sounds good, you can send me a private message here: so I can send you an export of the all the Custom Post Types I created for the demos (one for each) so you can see how it works

Best, David

David, thank you indeed, I was desperate to complete it during the holidays, so I did :) Have a look at home page for the final result, I like it :)

Looking great :D

Just wanted to say publicly, how much I love this product, I’ve been a CC member for 13 years, purchased many items, some good, some bad, but this is one of the best, easy to use, required virtually no setup, looks and acts way better than anything I could create myself.

Modded it a little to suit my needs, I purchased for a gallery page only to realize it displays videos too, so that saved a bit of cash.

View a real world example at –

Oops sorry, not sure what happened, I tired in Chrome on Mac, but on an incognito window it works great, you can fix the CSS conflict with the following code:

.media-boxes-filter li:after,
.media-boxes-filter li:before{
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
I hope this helps :)

Wow and awesome, worked a treat, thank you :)


danny12 Purchased


We have extended our support as advised. However, we are not sure you got the question. Instead of showing a gallery of multiple images in grid, we want to show just one image with a button labeled “click to view gallery” and then to display all images in a popup/lighbox that will scrolled to the left or right. It just as clicking on a single image in a gallery and opening full image in lightbox and scrolling from one image to another. Only that this will be activated by clicking a button. Thanks

Hi Danny,
I’m not sure I fully understand your question, but you can have a grid with only 1 item, and add multiple popup images for that single item, you can do it by adding this HTML inside each media-box:

<div class="mb-open-popup" data-src="gallery/img-37.jpg"></div>
<div class="mb-open-popup" data-src="gallery/img-38.jpg"></div>
<div class="mb-open-popup" data-src="gallery/img-39.jpg"></div>
I hope it helps :)

Also, for better support you can respond here in the same comment or contact me via email here:

Best, David

danny12 Purchased

Hello. Went through the documentation but could find not any instruction on how to open a gallery popup from click a single button. The idea is to have a button titled “View Gallery” and when clicked, open a popup with next and previous arrows to scroll through images.

You can move the “mb-open-popup” class to the button only (on each media-box/item), like in this example:

I hope this makes sense :)

Also don’t forget to renew your support period, since it has expired :)

Best, David

hello, i am trying to cut down the html to only have the full_width_gallery.html with the images and the category selection that way i can add to my existing website. each time i do i get an interesting side effect that the page does not scroll past whatever size the window is physically set to. what am i missing or not missing . thanks Frank

guess it didn’t refresh and it was a delay . looks like it is working with the added css. thank you very much

Hello David,

I didn’t want to sidetrack my question above, so I thought I would make a separate resource post here. I have used the popup script in the link below for over a decade. It does not rely on the Hash # sign to work. It also does not rely on the old school REL attribute which so many lightboxes used in the early days of HTML. Instead it uses HTML data attributes almost exclusively to fire it’s functionality Although the design of the website link below is lacking, the script is quite robust and full featured. It can do a lot more than just show images and videos.

The downside is that it does not have a pre-built thumbnail functionality within the popup like the script you’re using. It does have thumbnails generated, but it is not designed as well.

However, it does render HTML, AJAX requests, Videos and other content perfectly. Pixel perfect in fact. It will auto generate thumbnail images from Youtube and Vimeo APIs for the underlying HTML page. It resizes dynamic content and adjusts HTML and re-centers the popup on the fly as you scroll down. You can control the width and size of popups with percentages, VW, VH and pixel dimensions. There are a pile of option settings in the script and it is now open source so any customized gallery in the popup window can be designed. It used to be a paid script.

in my opinion, it is a superior popup script to all the others out there on a technical basis. But it needs some design love to fully benefit from all of it’s features. Fortunately, the majority of those design options are built into it’s API and prebuilt default options. The documentation is quite lengthy and is a long read. But, once you read through the docs and see what it can do, and are willing to get your hands dirty with code, it can be made to do a lot of things other than simply presenting images and videos.

I got to know the original developer pretty well in the scripts formative years and provided a lot of feedback and debugging during that time. Unfortunately, I couldn’t talk him into getting his hands dirty with a proper, modern redesign of his site to fully showcase the full potential of his script. He was a coder, not a designer. If he had taken that extra design step, he would have had the best lightbox popup clone out there. $00.02

Hi Don,
It is very interesting, I will check it out.

thank you for sharing :)

Best, David


I hope you do check it out. Your Media Boxes script is what I envisioned for the Floatbox tools many years ago. At least part of what I envisioned. I just didn’t have access to the source code at that time.

If you’re a tinkerer, I think you will figure out some useful tools to maybe market here on Envato. If you need the contact for the original developer, let me know. I will lookup his contact. It has been a few years since I touched based with him. He was retired and moved to Thailand and finished up his personal project with Floatbox. I will try and drop you a private message through the Envato system with my Email address.



Hi Don, thank you :) I appreciate it

Q. Do you have an option to use your script without it relying so much on the location hash in the URI to navigate the images in the Popup gallery?

I assume  the search tools in your script also rely on the # hash too, but I haven't tried that yet to confirm.  Is there an option to use "data" attributes instead, or another method.

The entire site here relies on the the # Hash for ajax reloading of dynamic pages and content. It makes your script unusable and photos won’t load. It is unfortunate because you have coded a very cool script.

Here is the error message I get when clicking on a thumbnail image in your masonry gallery: Error requesting !/uptools/masonery_gallery01/(grid|popup)=http://localhost/seed/!/uptools/uploads/Krystal%20(00).jpg;: 0

The main NAV menu here and a large majority of links use the # hash to delineate the dynamic backend pages to load both in my main menu and on most internal links on each page. It directly conflicts with how you have coded your script.

I have looked at your code. You’re doing quite a lot of javascript manipulation for hash.

The set_hash method set_hash( ) on or around line 2053 has a conditional statement for three scenarios: if(new_hash === '' || new_hash === '#' || new_hash === '!'){ /* if the hash will be empty then use this following peace of code, otherwise it will jump back to the top of the page if you set an empty result for the hash */ if(history.pushState) { history.pushState(null, null, ' '); }else{ location.hash = '#!'; } }else{ location.hash = '#' + new_hash; }

Two conditions are in conflict here on my site: 1. The hash # and 2. #!

Both the Hash and the pound/exclamation #! character are used heavily here! Who would’a thunk you chose the same exclamation ! mark that I did. The ! directory is where I develop a lot of pages that are under development! LOL ( see the URI string below) I have about two years of coding in that directory so changing it is not an option. But, the real problem lies with the Hash mark anyway.

I do not have a live page online to show you but i think you will understand the problem quite clearly from my text above because your javascript has a lot of code manipulation for hash scenarios. For this reason, I have not bothered reverse engineering your code and figured you have dealt with this issue in the past because the # hash is quite popular for both ajax content manipulation and also straight HTML manipulation when you’re seeking an ID attribute in an HTML page.

Here is an actual example of the query string to your gallery in my development folder /!/


I have managed to hack and get your popup gallery to load using a ? (question mark) in the query string just prior to your (grid|popup) query parameter . See below.


The gallery will open and work with the question mark (?) , but every time I click on a an image or thumbnail in the popup gallery it causes the underlying page to refresh because both your code and my code are working as intended and causing a page refresh indexed on the Hash # sign. So the underlying page reloads and your popup reloads the fresh image about a half second later. It is not a useable scenario for production because it is quite disruptive, but it fundamentally works.

Do you have a hack workaround in your javascript that can get this working? I have tried a few things trying to key in on different characters or group of characters but you script relies a lot on the Hash, just like mine does. I would really like to use your script rather than rely on my own masonry gallery that I have coded that has a similar popup scenario. Yours has more features and was the reason I purchased it because it saves me significant coding time.

Thanks for any input.


Hello Don,
the only solution would be to turn off the deeplinking functionality completely (the popup works without deeplinking too)

Just pass these JS options in the JS initialization of the plugin:

deepLinkingOnPopup: false,
deepLinkingOnFilter: false,
deepLinkingOnSearch: false,
I hope this helps :)


That worked well. I had a hunch you had something built into the code to work around this issue. I don’t typically ask questions from developers and look at their code to figure things out, but the rest of the script was executed so well that I decided to chime in and ask my question.

I have been sitting on your script for a while until now. I have been coding a long time on a project and have a whole back-end system of classes to dynamically organize and create folders into various galleries and upload directories for a collection of different file types. It is just one small piece of the puzzle I’m building. I’m in the final stages of the upload tools and wanted to light-up the front-end for the photo gallery section. Your script worked perfectly out of the box with little effort and saved me having to dive into more CSS. Thanks!

And I did just finally read all your documentation and it is written quite well. No bloviating and trying to impress fellow coders with technical jargon and excess technical punctuation that just muddies what they’re trying to explain in the first place. More likely trying to impress other coders about their technical syntax capabilities. Your documentation was perfect and in plain English—a few sentences, then some example code, and on to the next topic.

I also just noticed some of your other scripts on Envato. It is rather funny, because we think alike. I have built a lot of the back-end tools you are selling. I doubt your scripts would have worked for what I’m doing because there are a lot of custom coded areas specifically for the back-end directory structures for saving data that I don’t want cluttering a database – JSON data files, huge CSV’s, PDF’s, Word Docs, Images and other stuff.

Anyway, thanks for your gallery script. It will work well for photos!


Hi Don,
I’m glad that it worked, and thank you :D I hope the plugin helps you!

Best Regards!


4most Purchased

Hello, I want to find the way how to open fancybox popup programmatically, like want to have one button that will trigger it. Now, if I have this button inside media-box class with data-src attribute pointing same source as I use for that media-box (as it is in your documentation), the image gets duplicated and that’s what I don’t want to happen.

It would depend on how you have it configured, but if you know some JS, you can trigger the popup with something like this:


I hope this helps :)

Hi There,

How can I reduce the amount of posts shown in 1 x row at smaller screen sizes?

For example, 3 x items @ max-width of 1200px?

Thank you.

all good, I resolved this issue. Need to add setting columnWidth: ‘auto’,

How do you show less items for responsive screen sizes?

This code doesn’t work: resolutions: [ { maxWidth: 1200, columns: 3, horizontalSpaceBetweenBoxes: 10, verticalSpaceBetweenBoxes: 10 }, { maxWidth: 767, columns: 2, horizontalSpaceBetweenBoxes: 10, verticalSpaceBetweenBoxes: 10 }, { maxWidth: 576, columns: 1, horizontalSpaceBetweenBoxes: 0, verticalSpaceBetweenBoxes: 10 } ]

all good, I resolved this issue. Need to add setting columnWidth: ‘auto’,

Glad to hear you figured out :)


Paminga Purchased

Hi, I have a question about the license. If I buy the extended license can I include the script on several websites of my clients? Or do i need for each site a own license? Thanks and best regards, Patrick

Hi Patrick,
The extended license is for when you are creating a bigger project that is sold to multiple end users, for example a theme for sell on themeforest

But the case you described sounds like you would need a license per client / project, here’s a little description about license for better understanding:

I hope this helps :)

Best, David


Paminga Purchased

thanks for information :)

I’m doing everything i know how to get this to work. Can you please help me? I’m trying to pull in from an outside source.

Are you loading the items via AJAX? or JSON? if so, make sure to initialize the plugin after you added the HTML to your page

Best, David

Is there a way to show the filter count and what is being filtered? Like this:

At the moment the plugin doesn’t have a counter or the feature to show the filters in an external component

Best, David

Hi, i bought recently the plugin and I have one problem. Boxes starts first time hidden. They just are shown when I resize the window. I don’t understand why?

Plugin does not work with the parent container has display:none. There is the main reason.

Another problem is that while loading the images the <Load More> button appears. This button can be prevented from appearing as I have lazyload set when you get to the bottom of the page.


1) Yes, if the grid is hidden when it is initialized then it doesn’t calculate the right dimensions, I would recommend to initialize it until you show the gallery or refresh the grid with the following line of JS:


2) You can hide the “Load More” button with the following CSS:
    display: none;

I hope this helps

Best, David

jpnevil Purchased

Hi, thanks for the media box. I wonder if it is possible to have a gallery inside the pop up? Using the arrows allowed us to navigate through a bunch of images but without going to the next media box? THX

It is possible by a little modification, open the jquery.mediaBoxes.js file and find this:

startFancybox($container, selector);
then replace it for this:
$container.find('.media-box, .media-box-hidden').each(function(){
    selector = ".mb-open-popup[data-src]";
    startFancybox($(this), selector);

then inside each media box you can add extra images to the gallery with the following HTML:
<div class="mb-open-popup" data-src="gallery/img-37.jpg"></div>
<div class="mb-open-popup" data-src="gallery/img-38.jpg"></div>
I hope this makes sense :)

erwton Purchased

Hello, I have photos in my grid, but I only have the “No More Entries” button displayed (I specify that it works for some and others not, yet the code is identical). Do you know why? I use Framework7.

Thanks in advance for your feedback,

Sincerely, Erwan.

erwton Purchased

Additional information, the gallery is displayed only if there are exactly 9 photos or more, below 9 photos, I have the button “no more entries”.

How do you explain this?

Thank you.

erwton Purchased

Update: problem solved I added boxesToLoadStart: 1, and it worked thanks!

I’m glad you found the answer, let me know if you still have issues :)

Best, David

Fancybox “no drag and drop” settings don’t seem to work when setting it. My problem is, that data-fancybox=’gallerygroup1’ doesn’t work either, which would have been a workaround.

Basically, if I have anything in an iframe/ajax popup, 1: the content can be dragged left and right, getting to the “next” image without me wanting it to happen. First I tried to turn off swipe functionality but it doesn’t work, the draggable hand still appears on desktop at least, so the touch: component set to false both horizontally and vertically does not work. 2: Then I tried to data-fancybox group every element to a different group, so there will be nothing to drag and drop to (keyboard and buttons also turned off) but still goes to the next image.

Also, the toolbar button selection doesn’t work properly either, if i adjust any of these, to just have ONE close button, it’ll never be just that one, still keeping some or 2 close buttons, etc. I tried to use my originally working fancy3 js but it’s not compatible with the one you provided I am afraid, so that was a no solution either.

toolbar : false, // Should display toolbar (buttons at the top) buttons : [ // What buttons should appear in the top right corner. ‘slideShow’, ‘fullScreen’, ‘thumbs’, ‘close’ ],

Suggestions pls

The touch is fixed, by not setting horizontal and vertical to false, but setting whole “touch:false” and no details in brackets. The grouping I am still interested in how to achieve though as the default fancybox-data functionality doesn’t seem to be active.

Interesting, instead of using data-fancybox try using data-fancyboxMB
all “fancybox” words have been renamed to “fancyboxMB” (so we avoid conflicts with other versions of fancybox that may be already in the theme)

I hope this helps :)

Best, David

Really nice plugin (Edited, as I answered my own questions :D Can’t wait for the updates later!


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey