Cant open iFrame after using filter

Hi Carsten, I can’t check this live (no link) but it sounds like the filter that you describe, is doing an ajax request or otherwise modifies the page DOM tree on the fly. This will cause the FancyBox script to either not be aware of new content or loose track of existing content (after being moved around). The result is then that links are no longer opening in the light box as expected.

There is a way to make Easy FancyBox re-scan a page after new content has been added or changed but it depends on the script that is handling the actual filtering request. Do you know which script is responsible? Is it a theme or a plugin script?

If the theme or plugin is available on WordPress.org then I can do some testing for you. Or I can take a closer look at your live site, if you share a link 🙂 either publicly on this thread or using the contact form (with mention of this thread).

Hmmm, I tried to find a hook in the script code that we could use but there does not seem to be anything. Does that plugin (or the theme) come with support that you can contact? If so, the question to ask would be: “Is there an event triggered after clicking a filter button?”

OK, wait… I might have found a way but you’ll need to add this script to the page:

(function($){
  $(document).ready(function(){
    window.fancybox_pb_jt_filterable_grid_init = function(){
      $(".et_pb_jt_filterable_grid_container").each(function(){
        var observer = new MutationObserver(function(mutations){
          $(document).trigger('post-load');
        });
        var config = { attributes: true, childList: true, characterData: true };
        observer.observe(this, config);
      });
    }
    if ( window.et_load_event_fired ) {
      window.fancybox_pb_jt_filterable_grid_init();
    } else {
      $(window).load(function(){
        window.fancybox_pb_jt_filterable_grid_init();
      });
    }
  });
})(jQuery);

This code needs to be wrapped in script tags when posted in a text widget or inserted in a theme template file. I cannot post these tags on this forum without them being treated as tags (therefor not showing) correctly. But here the are with extra spaces added right after the first character.

Before the script code:

< script type="text/javascript">

After the script code:

< /script>

Remove this extra space in each one when adding them in the text widget.

But if you paste this code in a dedicated theme field meant for javascript, you probably do not want to add these tags!

I found a good tutorial about adding code to the page with Divi’s Code Module on https://divilover.com/add-javascript-jquery-code-divi-theme/ (option 1) …

You’ll need to add one Code Module to each page that has one or more filterable grids.

That’s excellent news! Thank you for the feedback. I’m sure others will benefit from this too 🙂