Code

Discussion on Media Boxes Portfolio - jQuery Grid Gallery Plugin

Discussion on Media Boxes Portfolio - jQuery Grid Gallery Plugin

Cart 3,610 sales

castleplugins supports this item

Supported

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

1063 comments found.

nybob99

nybob99 Purchased

Can this play local videos? I think I saw Youtube and Vimeo mentioned but nothing about locally stored videos.

nybob99

nybob99 Purchased

I need to display a mix of videos and image in my grid. Under “Handy Stuff” the last entry says “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=” iframe-on-grid” instead of the mb-open-popup class, for example”. I am unable to get this working. I literally copied and pasted your code into my grid and it doesn’t work. Could you please create a demo html page for this function and email it to bob99research-at-gmail-dot-com ? Or upload a working html page somewhere and paste the url here?

I would also like the videos to auto play if opened in an iframe and/or auto play when hovered over in the grid. Is this possible?

nybob99

nybob99 Purchased

I have another issues. My videos popup and play on my local version but when viewed on my web server the videos play in a tiny, tiny box. What could be the cause of this? Here’s where I’m testing it: www.truthnews.online

Hello,

About the iframe-on-grid, please contact me via email here: https://codecanyon.net/user/castleplugins#contact so I can send you a small fix



And the issue of your videos is strange, try adding this peace of CSS:

.fancyboxMB-slide--iframe .fancyboxMB-content{ height: 100% !important; }
Best, David

Hello – does the script support fallback image types for browser support… for example avif, to webp, to jpg?

Hello,

Thanks for your message!

At the moment, the plugin supports only the image formats that are natively supported by the HTML <img> tag. These include:

  • JPEG (.jpg, .jpeg)
  • PNG (.png)
  • GIF (.gif)
  • WebP (.webp)
  • SVG (.svg)
  • BMP (.bmp)
  • ICO (.ico)

Unfortunately, formats like JXL (JPEG XL) and AVIF aren’t fully supported across all browsers via the standard <img> tag yet, so the plugin doesn’t currently support them. Once browser support becomes more widespread and standardized, we’ll definitely consider adding compatibility.

Best regards,
David

Hi, I install your code on my site but it appears that fullscreen for youtube videos isn’t possible. The windows opens and close right away. IS there a code to change to allow that ? Thx a lot

Hello,
I’m currently away on a small vacation period, but I’ll be back in 8 days :)

Meanwhile, can you show me a living example online? so when I get back I can take a look and see what’s going on? you can contact me privately email here: https://codecanyon.net/user/castleplugins#contact

Best, David

Hello,

the preview (preview images on the right) is not working properly for me. Images are missing. I can only see 9 images, the rest are missing. Unfortunately I cannot send a screenshot here. Please help.

Beste Regards, Andreas

I have found it: boxesToLoadStart:

Hello
I’m glad you figured out :)

Best, David

Is there a way to have ‘custom media gallery’ BUT link the images to individual PDFs?

Hi,
I’m guessing you are referring to the WP version, I sent you a response in your other comment, here: https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148/comments

Best Regards

I’m trying to install this into a divi theme, and it tells me it failed. This is the message: The package could not be installed. No valid plugins were found.

Plugin installation failed.

Please me let me know what I can do to correct this. thank you

Hello,
Ohh, this is the stand-alone version of the plugin (HTML/JS), you can find the WP version here: https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148

if you wish to get a refund of this version so you can get the WP version, please contact me privately via email here: https://codecanyon.net/user/castleplugins#contact

happy to help :)

Is it possible to have a grid with a 1:1 ratio, that displays images of various aspect ratios that are reduced in size to fit the whole image within the box rather than showing only part of the images?

Hello,
At the moment it is taking images of different ratios and showing the most it can from the images to fit a perfectly square grid (without any empty space)

But what you mentioned is possible, we would need to have some black background to fill up the empty spaces, so you may have a grid with empty black spaces, like this: https://imgur.com/a/Yszelwx

Let me know what you think

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

Best Regards

Thank you for your reply! Yes, something like this would work. Preferably with the ability to specify padding for the media boxes and a background color or transparent background.

Hi,
You can try adding this peace of CSS:

.media-box-image [data-width][data-height]{
  background: rgba(0,0,0,.3)
}
.media-box-image .media-box-fill-height[data-width][data-height] img{
  height: auto !important;
  width: 100% !important;
}
.media-box-image [data-width][data-height] img{
  height: 100% !important;
  width: auto !important;
}
I hope it helps :)

Checkbox reset code worked perfectly. Thank you.

Is there are a way to reset checkboxes on page? Ideally I would like to create a button that will reset checkboxes on multiple_filters_checkboxes.html page example.

Hello,
Try executing this line of JS when you click on the button:

$('.filters[type="checkbox"]').prop('checked', false).trigger('change');
Best, David

Hello. Please we have a page with image gallery that we want to apply the script to but we will need to disable the infinite scrolling and possibly the lazy loading. Is this possible and how?

Hello,
Yes it is possible, it is one of the JS options, you can turn it off like this:

lazyLoad: false,
Best, David

Hi there! Thanks for the amazing plugin. My one question is about the search box: I have my filters set and they work perfectly, but if I type anything in the search box (including category name, post title) it returns no hits? Can you clarify what attributes the search box is looking for? Thanks for your help!!

Hello,
Thank you :)

Are you using the WP version? (this one is the HTML version and CodeCanyon says that you haven’t bought this version)

If you are using the WP version, then the plugin is searching for what’s visible in the box

If you send me a link to your site I’ll check it out :)

Best, David

Apologies – yes,I am using the WP version. Here is the dev page in question :)

https://www.joannegalligan.ca/open-gym-training-new-layout/#library

It is currently using posts for the video content. Do I need body content within the post to search keywords or can use tags instead? Thanks again for your quick reply!

Hello,

Ohh I see, you can use any as long as they are visible on each box/item, you need to add it in the skin editor

Additionally you could add it in the skin editor (either the post content or the categories) and then hide it with css, so it is there but invisible

Let me know if this makes sense :)

Hello.

Some time ago I bought this plug-in (jQuery Grid Gallery Plugin) and I have a small problem with it. Could you please take a look and help me with this. Why isn’t it working properly? Here is the website where you can see it: http://www.themaartis.stronazen.pl/projekty/mrok.html

Best Regards Simon

Yes :) I placed “the grid2” in div with parameters: margin-left: auto; margin-right: auto; width: 180px (example); but it is not so flexible. The width of this div must have as many pixels as the column. Then the column is centered. It’s a bit tiring to set the width for individual resolutions. Do you have a better idea for centering the column? :)

Hello. Do you have a better idea for centering the columns? Flexible for any resolution?

Hello
I don’t have another solution, I would recommend not using the static width option and if you want to control the whole width of the items on a specific resolution then wrap the grid in a container that you can control it’s with with CSS, that’s the alternative I can currently think of

Best David

Hello, can I use both https://videojs.com/ player for self-hosted videos and photos in the same gallery?

Hello,
The popup that comes with this plugin (fancybox) support mp4 files (self hosted), or if you really want to use videojs it is possible, but you would need to make that implementation, since unfortunately I don’t have instructions about it :)

Best, David

Hello! I am interested in the “Media Boxes Portfolio – Wordpress Grid Gallery Plugin” and had a few pre-purchase questions.

1. Is this plugin compatible with Elementor Pro?

2. Is it possible to include video content along with regular images in the galleries? What about gifs?

3. Can I add a custom link for each gallery item? Instead of opening a popup, I’d like someone to be sent to a subpage on my website (not a post) when they click on a visual.

4. For the multiple filters feature, does that work with a masonry layout? And if so, will the dimensions of filtered images change after being filtered (for instance, if I have a portrait style image, will it stay within those same dimensions when filtered instead of changing to a square or landscape image)?

5. Is ACF or any post pages required for this plugin to work?

Thank you!

Hello,
1) yes, you can place the gallery using a shortcode

2) Yes, you just need to specify the URL of your video (could be mp4 or youtube), also it supports GIFS

3) Yes, totally possible

4) Yes, multiple filters is compatible with any of the examples, and yes, the dimensions will be maintained

5) no, ACF is not required, you can configure galleries without it

I hope this makes sense :)

AWESOME, thank you so much!

this code work for webp images not sure I can past the whole code

<?php

/* ====================================================================== * READ DIRECTORY RECURSIVELY * ====================================================================== /

function read_directory($directory, $original_directory, $directory_url, &$output, $config_from_file){ }

$exclude_directories        = array('.', '..', '.DS_Store', 'thumbnails');
$images_allowed             = array('jpeg', 'jpg', 'png', 'gif', 'webp'); // Add 'webp' to the allowed image types
$thumbnails_folder          = 'thumbnails';
/ ====================================================================== *
        CHECK IF GIVEN DIRECTORY IS AN ACTUAL DIRECTORY
 * ====================================================================== /
if( !is_dir($directory) ){
    return array();
}
/ ====================================================================== *
        ITERATE FILES/FOLDERS IN DIRECTORY
 * ====================================================================== /
$handler    = opendir($directory);
while ($file = readdir($handler)) {
}
// Exclude directories
if(in_array($file, $exclude_directories)) continue;
// If its a directory
if( is_dir( "$directory/$file" ) ){
    read_directory("$directory/$file", $original_directory, "$directory_url/$file", $output, $config_from_file);
}
// If its a file
else{
}
// only images are allowed
$extension = pathinfo("$directory/$file", PATHINFO_EXTENSION); // Get file extension
$extension = strtolower($extension);
if( !in_array($extension, $images_allowed) ) continue;
// create new file                                        
$new_file                   = array();
// Directory/filter vars
$new_file['directory']      = $directory;
$new_file['directory_date'] = filemtime( $directory );
$new_file['filter']         = $original_directory == $directory ? '' : basename($directory);
$new_file['extra_filter']   = ''; // category 2, category 3
// Thumbnail vars
$new_file['thumb_src']      = file_exists( "$directory/$thumbnails_folder/$file" ) ? "$directory_url/$thumbnails_folder/$file" : "$directory_url/$file";
$file_pathinfo              = pathinfo( $file );
$new_file['name']           = $file_pathinfo['filename'];
$new_file['date']           = filemtime( "$directory/$file" );
$new_file['random']         = rand(0,9999);
// Popup vars
$new_file['popup_src']      = "$directory_url/$file";
// Replace/Add vars from config.txt file
$found                      = find_img_in_array( str_replace("$original_directory/", "", "$directory/$file"), $config_from_file);
foreach ($found as $key => $value) {
    $new_file[$key] = $value;
}
// Add new_file to output
$output[]                    = $new_file;

/ ====================================================================== * FIND IMAGE IN ARRAY (FROM .TXT) * ====================================================================== /

function find_img_in_array($image, $array){ foreach ($array as $row) { if($row[‘image’] $image){ return $row; } } return array(); }

/ ==================================================================== * GET CONFIG FROM .TXT * ====================================================================== /

function get_config_from_file($directory, $config_file_url){ }

$output         = array();
if($config_file_url!= '' && file_exists("$directory/$config_file_url")){
}
$config_file    = file("$directory/$config_file_url");
$new_obj        = array();
// Iterate each line of the .txt file 
$config_file[]  = ''; // add a break line at the end of file
foreach ($config_file as $row) {
}
// If the line is empty add the new_obj (new_obj is the config per image)
if(trim($row) == ''){
    if(count($new_obj)>0){
        $output[]   = $new_obj;
        $new_obj    = array();
    }
}
// Fill the new_obj var
else{
    $line                       = explode("=>", $row);
    if(count($line)==2){
        $new_obj[trim($line[0])]    = trim($line[1]);
    }
}
return $output;

/ ====================================================================== * GET AUTO GRID DATA * ====================================================================== /

function get_auto_grid_data($directory, $config_file_url=’’, $directory_url=’‘){ }

if($directory_url==''){
    $directory_url = $directory; // the $directory_url is used for the  so it could be different from $directory if you set $directory to an absolute path of your server
    // i.e. webpage = http://localhost:8888/auto_grid | $directory = /Applications/MAMP/htdocs/auto_grid/galleries/gallery | $directory_url = '/auto_grid/galleries/gallery'
}
// Output
$output = array();
// Read directory
read_directory($directory, $directory, $directory_url, $output, get_config_from_file($directory, $config_file_url));
// Return output in json
return htmlspecialchars(json_encode($output), ENT_QUOTES, 'UTF-8'); // htmlentities vs htmlspecialchars

/ config.txt file: ?>

image           => Category 1/Autumnn.jpg
    link            => https://codecanyon.net/?param=param
    extra_filter    => Category 2, Category 3
    name            => My Image Name
    thumb_src       => url
    ratio           => 1x1
    popup_src       =>
*/

Hello
I’m not sure I understand, but you can also contact me privately via email :)

Best, David

I see. I couldn’t figure how to reply to your answer about radio buttons. Can checkboxes functionality be altered to work as single select? Checkboxes functionality is multiple select.

Yes, but it is more complicated, I can send you an example via email, please contact me here: https://codecanyon.net/user/castleplugins#contact

Best, David

Hi there. Is there an example where we can have barebones radio buttons instead of rectangular ones for lets say this page https://www.castlecodeweb.com/mediaboxes/example/media_grid.html? Here is an example of what I’m thinking of: https://codepen.io/desandro/pen/OJPGdE

Hello,
I don’t have a radio button example, but I have one with checkboxes, which might be similar: https://www.castlecodeweb.com/mediaboxes/example/multiple_filters_checkboxes.html

I hope it helps :)

Is there a way within the script to add a ‘contact’ form or link, or do we need to edit source code to ad this?

Hello,
The plugin doesn’t have this feature, it would need to be added in the HTML, the gallery also can be extracted and added in any theme or existing website

Best, David

I have 10 items on page, 4+4+2. The last two items are left aligned and I would like to center them on page horizontally. Solutions I found in comments didn’t work for me. Is this doable with the version I have?

Hello,
Unfortunately I’m afraid is not possible, it would be possible if you would only have 2 items, but not on multiple rows, for example: 4+4+2

Best Regards

OK. How can I center 2 items within a grid-container?

Is not pretty, but I’m coping the answer I gave to TrideDesigns:

you mean to center the boxes when there are not enough to fill the full width? if so then, there’s no option for this, but with these few modifications it can be done:

1) open the mediaBoxes.js file and find this:

columnWidth: '.media-boxes-grid-sizer',
and replace it for this:
columnWidth: '.media-boxes-grid-sizer',
isFitWidth: true,


2) wrap the plugin in a div like this:
<div style="margin-left:-30px;">
   <div id="grid">
       your media boxes goes here
   </div>
</div>


3) finally add this peace of CSS:
<style>
     div.media-boxes-container{
        margin-left: auto !important;
        margin-right: auto !important;
    }
</style>

I am using the grid to load articles in an webshop. When the grid is initalized all the boxes are loaded with a zoom in effect – can this be removed so that the boxes just appear without any effect ?

Hello,
It is possible, but it would also affect the filtering effect of the boxes, you could try the following:

open the mediaBoxes.js file and find this:
hiddenStyle: { opacity: 0, transform: 'scale(0.001)' },

then replace it for this:
hiddenStyle: { opacity: 0, transform: 'scale(1)' },

finally clear your browser cache and try again

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

Best, David
by
by
by
by
by
by

Tell us what you think!

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

Sure, take me to the survey