taki1973

The reason why Twenty20s don’t show up on a page, especially if you have multiple Twenty20s on a page or if your images have large file sizes, is that the Twenty20 script doesn’t run at the correct time. This is/was the same issue with the original, non-Wordpress, TwentyTwenty jQuery plugin.

The issue is that the script uses document ready. This is fine if you have one Twenty20 or if you have a few Twenty20s all with tiny images. A document-ready script runs when the DOM has loaded but that’s not necessarily when the content has loaded. The purpose of a document-ready script is to run as soon as possible and not wait for all content. You can see this in your page code when a Twenty20 div is there (i.e. the DOM has loaded) but the height is zero (i.e. the content has not loaded.)

By contrast, a window-on-load script runs when all content has loaded. This is best when you need to wait for images to load.

Referring to Twenty20 v1.7.3, go to inc > twenty20-shortcode.php , at about line 79:

Find:

<code>$script .= ‘<script>jQuery( document ).ready(function( $ ) {‘; </code>

And change it to:

<code>$script .= ‘<script>jQuery(window).on(“load”, function() {‘; </code>

Then in the following ~17 lines, there are six instances of lines starting with:

<code>$script .= ‘$(“</code>

Change all six of these to:

<code>$script .= ‘jQuery(“</code>

That should do it. I have up to 11 Twenty20s on a single page and they load just fine. Of course, if you have a large number of images on a page, it helps that their file sizes are kept reasonably small.

Ideally the plugin developer will make these changes in the plugin code so that you don’t have to redo the edits every time you update the plugin.