1037 comments found.
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.
Hello,
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,
Piotr
Hello Piotr,
I’m guessing you are referring to the WP version right? (this is the stand alone version)
This example was a little bit tricky, but I created a Custom Post Type and had to add some HTML on some posts (which the plugin supports).
I can send you an export of this Custom Post Type, so you can recreate it, do you have the “WP All Export” plugin?
Best, David
I am sorry, I mixed up the forums, yes, referring to the WP version.
That would be great to see your Custom Post Type structure, perhaps including PHP for that too, if makes sense? I will install the WP All Export, no problem.
The thing is basically how to mix the different types of content in one portfolio. The previously mentioned Dark Grid is one example.
Another one is the Media Grid example, where you combine, seemingly, different post formats (video and media), which I believe are bound together by the WP category, but you magically add a text box with a quote or a newsletter subscription box with a form. Which I guess are HTMLs added as Text fields in two extra skins? With extra two fake posts in the same category as all other posts, each using a custom skin from these two HTML ones? Hmmm…
Thanks indeed!
Hello,
Sounds good, you can send me a private message here: https://codecanyon.net/user/castleplugins#contact 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 pozytywy.pl home page for the final result, I like it
Looking great 
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 – leemiller.run/vlog.html
Hello,
Thank you very much! I appreciate the nice review
Your site is looking great!
Best of luck!!!
Hey, no problem with the review, if it’s a good product I like to say, if it’s rubbish I stay silent.
A quick query, re the CSS, though I suspect it’s one of the other stylesheets, but it might be a Firefox specific issue, notice that the bullets are showing in the filters, anyway you can think of to not display these? It’s minor but annoying.
It’s also the same on the latest news page – https://leemiller.run/latest-news.html
Cheers, Lee
Hello Lee,
I tried to open your site, but it says “403 Forbidden”, I think it is protected so I can’t see it. but yes, it is probably some CSS conflict, if you give me access I’ll be happy to take a look
Best, David
lol now I’m worried, thanks for pointing it out, I’ll get back to you once I’ve tried to fix, were you viewing on mobile? And which browser? Thank you
Hello,
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
Great
Hello
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: https://codecanyon.net/user/castleplugins#contact
Best, David
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.
Hello,
You can move the “mb-open-popup” class to the button only (on each media-box/item), like in this example: http://www.castlecodeweb.com/mediaboxes/example/pinterest_style.html
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
just keeps changing the grid format
next question regarding the grid format . can you have one column with 8 images and the next column with 4. can the amount of images on each row change in the amount shown
Hello Frank,
1) The lazy load feature is triggered when you scroll your page, you can set the grid to load more images in the beginning, so it fills up the page completely and create a scroll bar, maybe like this:
boxesToLoadStart: 20,
2) Unfortunately not, the amount of columns per row can’t be changed, since the logic is based on columns (not in rows), I think this makes more sense when the images are not of the same dimensions (width & height)
Best, David
i get that the lazy load is triggered when scrolling but the on load only shows three grid pattern not the four that it is supposed to when coded. how to get the loaded images to show when first going to the page
<script> $(’#grid’).mediaBoxes( ‘refresh’ ); $(’#grid’).mediaBoxes( ‘resize’ ); $(’#grid’).mediaBoxes({
filterContainer: '#filter',
search: '#search',
columns: 4,
boxesToLoadStart: 12,
boxesToLoad: 24,
overlayEffect: 'direction-aware',
horizontalSpaceBetweenBoxes: 0,
verticalSpaceBetweenBoxes: 0,
minBoxesPerFilter: 24,});</script>
body{
overflow-y: scroll;
}
I hope it helps
so with the version that is above when loaded it only shows 5 images the code says
<script>
$('#grid').mediaBoxes( 'refresh' );
$('#grid').mediaBoxes( 'resize' );
$('#grid').mediaBoxes({filterContainer: '#filter',
search: '#search',
columns: 6,
boxesToLoadStart: 12,
boxesToLoad: 24,
overlayEffect: 'direction-aware',
horizontalSpaceBetweenBoxes: 0,
verticalSpaceBetweenBoxes: 0,
minBoxesPerFilter: 24,});</script>so what happens is that the last image doesn’t show. what am i doing wrong please
when loading your page above I see 6 columns not 5, like this: https://imgur.com/a/5eRcMgw
Did you add the CSS code I sent? it may help
yes added that in it as well. when i go to the page linked from here i get one view but if i go to the page in a new window i get a different view
guess it didn’t refresh and it was a delay . looks like it is working with the added css. thank you very much
Great
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
https://floatboxjs.com/demoHi Don,
It is very interesting, I will check it out.
thank you for sharing
Best, David
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.
Cheers,
Don
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 /!/
http://localhost/seed/#!/uptools/masonery_gallery01/(grid|popup)=http://localhost/seed/!/uptools/uploads/Krystal%20(00).jpg
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.
http://localhost/seed/#!/uptools/masonery_gallery01/?(grid|popup)=http://localhost/seed/!/uptools/uploads/Krystal%20(00).jpg
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.
Cheers.
Hello,
Do you want to turn off the hash change from the plugin?
Best, David
Hello David,
Sorry for the delay. If I understand your question correctly, yes, I want to prevent your script from modifying any of the URL string that is passed to my site until the end of the entire URL string.
The “Hash change” you’re doing midway after the # (called the pound sign in America) to the end of the query string portion of the URL is causing my site to fail when I click on a thumbnail image to enlarge it.
However, I would like to retain the popup gallery functionality.
Can we use some other combination of characters for your Javascript to use other than searching for the # as the break point.
I can append and include any combination of characters/integers at the end AFTER a question mark (?) which is a standard break point to use for query parameters. However, I’m uncertain if this will dance well with your Javasscript as it’s written. Can your script work with this without calling a fresh page reload and still navigate the links in the popup photo gallery without the drama associated with a fresh page reload?
Thx. Don
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
Thanks,
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!
Don
Hi Don,
I’m glad that it worked, and thank you I hope the plugin helps you!
Best Regards!
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.
Hello,
It would depend on how you have it configured, but if you know some JS, you can trigger the popup with something like this:
$('.mb-open-popup').first().trigger('click');
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’,
Great
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
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: https://codecanyon.net/licenses/standard
I hope this helps
Best, David
thanks for information
I’m doing everything i know how to get this to work. Can you please help me? https://the-hamilton-b767f7.webflow.io/gallery-copy. I’m trying to pull in from an outside source.
Hello,
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: https://the-hamilton-b767f7.webflow.io/gallery?space=Full+Event+Room
Hello,
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?
I check there is a problem working with tabs. It can works if a trigger an event when the user click to a tab then I make mediaBoxes(). There is not another solution?
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.
Hello,
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:
$(’#grid’).mediaBoxes(‘refresh’);
2) You can hide the “Load More” button with the following CSS:
.media-boxes-load-more{
display: none;
}
I hope this helps
Best, David
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
Hello,
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
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.
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.
Update: problem solved I added boxesToLoadStart: 1, and it worked thanks!
Hello,
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.
Hello,
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 Can’t wait for the updates later!
Great
This item was featured on CodeCanyon
Elite Author
Contact the Envato Market Help Team