twentytwenty and Tabby (and other tab plugins)

Unfortunately this comes down to functionality in Zurb’s TwentyTwenty JavaScript, which this plugin uses. You can submit feature requests to Zurb at https://github.com/zurb/twentytwenty under the issue tab.

@regeneris, I had the same problem so I’m posting my work around for anyone who might find it useful.

jQuery(document).ready(function(){
        var refreshTwentytwentyInstance = function(){
            jQuery(window).trigger("resize.twentytwenty");
        };

        jQuery("div.tab1, div.tab2, div.tab3").on("click", function(){
            setTimeout(refreshTwentytwentyInstance, 100);
        });
    });

resize.twentytwenty is built into twentytwenty plugin and works when there is a window resize event to allow images to resize. So, the above click event will just call the trigger to refresh the tab’s 20/20 image. Regards and good luck!

Hello ScarLight

Could you please specify where to put your code snipet?
Thank you and Happy New Year!
Juraj

@jurajlip, the easiest way to do this is to use back your themes option panel. I have a template that includes Redux Option panel, I just place the code in the “Custom JS code” textarea box.

If you don’t have such option in your template, try these tutorial link: https://code.tutsplus.com/articles/how-to-include-javascript-and-css-in-your-wordpress-themes-and-plugins–wp-24321

Just a note, i’m using a click to trigger the resize event, you may need to adjust your to suit your need. Good luck.

@scarlight, thank you very much for the fast reply. I am using Divi Theme from Elegant themes and I was only able to find a template for adding custom CSS code. I will try to use the link you gave me but it could be over my head.

Hey guys I’ve got the same kind of issue with the 20/20 plugin inside tabs.

I’m not really sure about the js code to put on my page

<div class="tab-content">
      <div id="menu0" class="tab-pane fade in active">
        content menu0
      </div>
      <div id="menuBefAft" class="tab-pane fade">
          [twentytwenty]
              <img src ///////>
              <img src ///////>
          [/twentytwenty]
      </div>
</div>

I’m using the “toolset framework” to build my site and I guess I know where to put the code, but as nothing change, I’m wondering if I have to adapt this code for my website.

jQuery(document).ready(function(){
        var refreshTwentytwentyInstance = function(){
            jQuery(window).trigger("resize.twentytwenty");
        };

        jQuery("div.tab1, div.tab2, div.tab3").on("click", function(){
            setTimeout(refreshTwentytwentyInstance, 100);
        });
    });

Thanks!

Hi @bruno-le;

Yes you need to change it to work for your tabs,

replace jQuery("div.tab1, div.tab2, div.tab3")

to jQuery("div.tab-pane")

I’m assuming those are the buttons to your tabs :). Good luck!

Awesome! It’s working! ?? Thanks for the very quick answer, if I had knew I would have ask way earlier!

Hi @bruno-le;

Your most welcome :).