Discussion on Media Boxes Portfolio - Responsive jQuery Grid Plugin

Hi,
Can you show me a living example online?
Best, David

More than I happy to. I appreciate the help. An example page is https://narapilgrimwood.com/great_tradition_icons.html

Thanks much, Jeff

Hi Jeff,
I see the title and alt attributes generated correctly in the “img”, remember that the img are generated by JS, so they are not visible when the page first loads, but google is able to index sites with JS generated images

Best, David

sent you an email

Hi, the WP version is finally available, you can check it out here: https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148

Best

Hi,
I don’t have any example of this, but it may be possible if you have a MP4 player and then just link it as an iframe page

Best, David

OK, so what is the best method of launching locally hosted videos from the plugin, and what is the correct box mark-up for that?

You could have a page with a video player, something similar to this one: https://videojs.com/

then include that html page as an iframe in the media-box, like this:

<div class="media-box">
    <div class="media-box-image">
        <div data-width="214" data-height="213" data-thumbnail="gallery/thumbnails/thumb-9.jpg"></div>

        <div class="thumbnail-overlay">
            <i class="fa fa-video-camera mb-open-popup" data-type="iframe" data-src="you_player_page.html"></i>
        </div>
    </div>
</div>

note the mb-open-popup element

I hope it makes sense

Hi,
the WP version will be ready soon, and this will be the multiple filter setting available: http://www.castlecodeweb.com/mediaboxes/example/multiple_filters.html

Best, David

Hi, the WP version is finally available, you can check it out here: https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148

Best

Hi Christian,
this is not a WP plugin, this is a stand alone plugin, but the WP version is almost ready, hopefully it will be ready in couple weeks.

Best, David

Hi,
the plugin is ready, you can check it out here: https://codecanyon.net/item/wp-media-boxes-portfolio-responsive-wordpress-grid-plugin/22881148

Do I have to buy the plugin again??

Hi,
no, I can refund you the money for this one so you can buy the WP version, just contact me via email here: https://codecanyon.net/user/castlecode#contact

Best, David

Thanks David,

for Q1, is there at least a way I can force the max height of the media box while keeping the thumbnail ratio? such that if the media box is wider than the thumbnail, the image will maintain its ratio, with left/right padding.

Q2. Thanks! it worked as expected,

Best regards,

Hi,
Q1: you could try adding this peace of CSS:

@media only screen and (min-width: 1280px) {
    .media-box-image div[data-width][data-height] img{
        max-height: 200px !important;
        width: auto !important;
    }

    .media-box-image div[data-width][data-height]{
        max-height: 200px !important
    }
}

this means that if the width is wider than 1280px then the height of the thumbnail will have a max-height of 200px

I’m not sure how well this will work but it seems to do the trick

Best, David

Nice!! this is what I needed. As usual, you’ve been very helpful,

Thanks again David,

Hi Thomas,
Currently this is not possible via CSS, since the dimensions are calculated via Javascript.

But if this is a must for you we can work under freelance basis so I can tweak the JS in order to add an additional setting for changing the data-width and data-height on certain resolutions (something like the resolutions option)
If so you can contact me privately via email here: https://codecanyon.net/user/castlecode#contact

Best, David

Hi,
yes indeed, loading any page on an iframe will be contained within the iframe, unfortunately there’s no way to go beyond the scope of the iframe.

Best, David

Ok thank you

Heres the exact same sample on another page that works but with less pictures

https://landio-ii-445274762a8a2deaa0aff70f34d91.webflow.io/listing/tn-perry-00001#

Ohh I see that you are creating the boxes with JS, I see a couple of issues:
1) Remove the div with the id “loadpics”
2) Don’t place the script inside the div with the id of “grid” you can place it before the JS initialization of the plugin
3) Then replace this:

document.getElementById('loadpics').innerHTML = photoshtml;

for this:

document.getElementById('grid').innerHTML = photoshtml;

let me know how it goes

It worked fantastic thank you!

Hi,
The plugin uses this for the dimensions (you have it when creating the boxes with JS):

data-width="240" data-height="151" 

you can either remove it so the plugin automatically do it for you or just adjust it so it matches your image ratio

Best, David

Hi,
yes, this is possible, check this out: https://codecanyon.net/item/media-boxes-portfolio-responsive-grid/5683020/comments?page=39&filter=all#comment_18567674

Also don’t forget to renew your support period as it has expired (in case you need)

Best, David

I know, Thank you so much for your help, that looks exactly like what i want, for some reason its not working for me, maybe i have some problem with the page, thanks a lot anyways

strange, it should be working, you can contact me via email here: https://codecanyon.net/user/castlecode#contact so you can show me a living example online and see what might be wrong

Best, David