Code

Discussion on Media Boxes Portfolio - Responsive jQuery Grid Plugin

castlecode

castlecode supports this item

Supported

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

852 comments found.

I’m having some trouble with SEO…titles and alt tags. None of the Media Boxes images are being indexed, and when I generate an image sitemap, none of them are found for the map.

I put identical data-title and data-alt tags for the thumbnail and the popup image (I’m using Magnific). Could that be an issue?

Thank you.

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

Hi, I just bought this plugin. Won’t install. Does it not work for Wordpress? Simon

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 there. Thanks for a great plug-in. I want to change the fancybox iframe source to local video files, ie .mp4’s located on the same server as the website pages instead of Vimeo or Youtube. What settings or code do I need to change, or add? Thanks

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,

I wanna know is this plugin is available for wordpress if yes is it possible to sort multiple filter and multiple sorting please check below link for reference https://www.alfresco.com/customers

Thank you

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 Guys,

I just bought this plugin but will not install, any suggestions? ( Wordpress)

Christian

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

When will the WP Plugin be ready?

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

adarrab

adarrab Purchased

Hi David,

Q1: Is there an option to set the number of rows (similar to columns), where by setting the number the rows, the media boxes & thumbnails get automatically resized to match the number of rows specified?

I’m having a problem with wide screen resolutions e.g. 1280×800. I’m setting the number of columns to 4 (which gets honored) however, they appear a bit too large with only 2 rows.

How can I explicitly control the number of rows? I don’t mind resale the thumbnail to smaller size. What is the best way to achieve this?

Q2: How to make the thumbnail clickable and open the link in a new tab? I tried adding data-src=’url’ target=’_blank’ as part of the div, but that didn’t have any effect.

Thank you,

adarrab

adarrab Purchased

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
adarrab

adarrab Purchased

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

Thanks again David,

Would it be possible to declare the value of data-with and data-height in css? Because i would like to change the ratio (values) depending on media-queries in css. Maybe @media (min-width: 768px) data-height=”2”. Very usefull for boxes with (long) text content. Could you help me? Additional fee no problem! – Best regards Thomas

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

SkylineM

SkylineM Purchased

Fullscreen view issues with Iframe

Hello I was tryin to load the gallery from a webserver hosted on another domain using Jquery but was unable to load it in due to the CORS policy that wont allow for external files from untrusted domains to be loaded. So in short I tried to load the gallery with an Iframe tag ad it works but full screen is contained only to the Iframe so it has issues loading properly.

Do you know how to fix this?

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

SkylineM

SkylineM Purchased

Ok thank you

SkylineM

SkylineM Purchased

Hello I am wondering about a simple issue regarding not being able to load more than 100 images I try to load 155 images and it just comes up with “loading….” though it never loads. Is there some type of limitation to the number of files or the total file size in all that could be preventing more from loading?

Thanks

SkylineM

SkylineM Purchased

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 :)
SkylineM

SkylineM Purchased

It worked fantastic thank you!

SkylineM

SkylineM Purchased

Hello Im having an issue with having the pictures properly fit within the thumbnail overlay.

A live sample of this issue is here https://landio-ii-445274762a8a2deaa0aff70f34d91.webflow.io/listing/nm-luna-00010#

I believe it to be because of the image size but I don’t know how to fix this Every time I try to change the width/height it seems to be overridden by something else.

Do you know why this is?

Thanks

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
mjarkani

mjarkani Purchased

Hi I bought your great plug in long time ago I just have a question, in multiple filter format can we do something to make the filters work individually? like when you choose one it resets the other, I mean use OR instead of AND, or better say when we choose a one it rests the others

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

by
by
by
by
by
by