Discussion on Media Boxes Portfolio - Responsive jQuery Grid Plugin

Hi,
try adding this peace of CSS:

body{
      overflow-y: scroll; 
}

Doesnt seem to work for me. I even tried adding !important to it.

setTimeout(function(){  $('#grid').mediaBoxes('resize') }, 100)

That helped. Also, how do I get rid of the “Load More” button and have it automatically load more as you scroll down. I have been looking through the docs but unable to find that information.

Hi,
I see that you got it working already, as I see it in action in your page

Hi,
currently there’s no external JS method to filter the media boxes, at this moment the best solution (in order to leave the JS file intact) would be to add fake DOM elements and trigger the click event (as you suggested)

I will try to consider this as a future update though
Best, David

OK then as the element to be hidden will change as the user navigates through a carousel in the parent list and is thus totally unpredictable, can I use a single hidden checkbox and change its attribute as needed, or do I need to have multiple hidden checkboxes and change which one is selected?

Hi,
you mean for the filters right? you are using checkboxes? can you show me a living example online so I can understand what you are trying to do?
Best, David

Sure. Go to http://qa.www.blackfacts.com/350years. Click the large left/right arrows at the top of the page and you will navigate through items one at a time via a custom jQuery plugin that wraps around an instance of the Owl Carousel.

The lower portion of the page contains media box versions of the same items, again using a custom jQuery plugin that uses your MediaBoxes plugin. If you scroll down the page, more media boxes are pulled in via AJAX and the Waypoints plugin.

The item selections are random, so you may not see this the first time, but sooner or later, you will see that the entry in the top of the page is also showing in the lower part of the page, which is redundant.

So my objective is to fire off a custom event on each arrow click, broadcasting the unique id of the item being displayed, and then applying a filter to the MediaBoxes at the bottom to exclude the box with the attribute data-factid=[the one showing in the top].

So no checkboxes or user awareness of a filter is desired, I want to be able to use filters to hide the one item in the MediaBoxes list that is currently being showcased in the top of the page.

Does that make sense?

Hi,
I’m not quite sure why, but your page doesn’t load on my end :/ but I think I understand a little, so you can use the normal filter HTML, for example:

<ul id="filter">
  <li><a class="selected" href="#" data-filter="*">All</a></li>
  <li><a href="#" data-filter=".indoors">Indoors</a></li>
  <li><a href="#" data-filter=".outside">Outside</a></li>
  <li><a href="#" data-filter=".photography">Photography</a></li>
</ul>

$('[data-filter=".indoors"]').trigger('click');

#filter{
    display: none;
}

The period at the end of my sentence was included in the url.

The url is: qa.www.blackfacts.com/350years

Based on what you wrote, I am thinking that I will need to do this:

<ul id=”filter”>
  <li><a class=”selected” href=”#” data-filter=”*”>All</a></li>
  <li><a id=”filter-controller” href=”#” data-filter=’:not([data-factid=’18923’]’></a></li>
</ul>

and in the custom event hander that gets invoked when the main item changes, do:

$(”#filter-controller”).data(“filter,=’[” + currentFactId + ”’]”).addClass(‘selected’);

Maybe I needed to encode the Html in the post to make it show as html code?

<ul id=”filter”> <li><a class=”selected” href=”#” data-filter=”*”>All</a></li> <li><a id=”filter-controller” href=”#” data-filter=’:not([data-factid=’18923’]’></a></li> </ul>

Hi, 1. how are you changing it for the popup videos?

2. try adding this peace of CSS:

body{
      overflow-y: scroll;     
}

$(".mb-open-popup").fancybox({
  vimeo : { 
    color : 'ff0000'
  }
});

2. I already tried overflow-y: scroll and checked it again but it’s still happening for some reason.

Hi,
1) I haven’t change the color of the vimeo buttons, does vimeo allow you to pass those colors in the url?

2) can you show me a living example online so i can take a look and see what’s going on?

Best, David

Hi,
I don’t have IE9 :/, but I tested on IE11 and everything looks good, I tried resizing multiple times and with all kind of dimensions!

can you show me a screen shot of the issue?
you can contact me privately via email (trough my profile at the bottom there’s a contact form)
Best, David

Hello David

Thank you for your fast reply. You can use the emulator in IE 11. (Hit F12 and change the settings to IE 9)

You mean the “User agent string” right? I did try that but still I don’t see any issue, I see it like this: http://www.castlecodeweb.com/files/plugins_comments/3.png

yes correct. and now resize the browser window, but don’t reload the page.

Hi,
yes indeed, I resized the browser many many times and I didn’t get any issue (not even once). Here’s some testing I made: http://castlecodeweb.com/files/plugins_comments/4.mov

thank you for testing. is that microsoft edge? try it on IE 11 again please.

I see the issue now, its when changing the “document mode” to 9 (with 10 it works).
But this may be an issue with the emulator, because other sites are also failing, for example try the masonry site: https://masonry.desandro.com/ you’ll notice the same thing happens here :s

on browserstack do you see the same issue on https://masonry.desandro.com/ ?

I’ve managed to set the height of the overlay (I needed to add !important) but it’s removed the bottom of the overlay so that it’s displayed at the top of the thumbnail. Is there a way of having the reduced height overlay at the bottom of the thumbnail? Thanks.

Hi there,
You mean with Javascript/jQuery?

I think so. It’s just that having multiple filters the ‘all’ option shows all in that category. I would like all to show all for all categories. Basically, a reset to default view.

Hi,
I see that you have this:

$(".reset_filters").click(function(){
   $('[data-filter="*"]').trigger('click');

});