Trying to use multiple TwentyTwenty instances, but some are returning height as 0, and not displaying

Question

I dont' know what's going on, or when this has changed.. but it's a real problem.

There are thumbnails that relate to hiding/showing main divs above that all contain the TwentyTwenty plugin slider.

The problem is that there's just no logic in when the slider divs are shown, and when they have the height set as 0 on them. When loading them up, some of them show, some don't, and when resizing the window, often the current one that's hidden is now shown, but none of the others will show.

Is there anyone who knows about javascript who can help me out? This is what I'm using as the JS script

function showSlide(slideNumber)
{  
    $(".image-compare-set").hide();
    $('.image-compare-set[data-image-num="' + slideNumber + '"]').show();
}

$(".twentytwenty").twentytwenty();
$(".image-compare-nav img").click(function() {
    showSlide( $(this).attr('data-image-num') );
});

showSlide(1);

Answer 1

I've tested a bit and managed to find a pattern which may lead to a solution. It appears that your function showSlide is fine. However, I suspect that the call to $(".twentytwenty").twentytwenty(); may be causing the weird behaviour.

By reading through the Setting up section at http://zurb.com/playground/twentytwenty, it says

Then call twentytwenty() on this container once the images have loaded:

My guess is that, somehow, $(".twentytwenty").twentytwenty(); gets called before any needed operation on the images are done (which would mess up the div container); Or it doesn't even get called at all after the div's hiding and showing (from running showSlide) takes place.

I suspect this is true because of a test. I've loaded the url and saw the main div not displaying (as if it was actually hidden). Then, in the console, I typed jQuery(".twentytwenty").twentytwenty() and saw that, shortly after, the main container got displayed normally. Every time a new thumb got clicked, the same behaviour would repeat.

Considering that it is difficult to point out a probable cause without having access to the code and testing it, I would make a wild guess here: try to make your function showSlide as

function showSlide(slideNumber)
{  
    $(".image-compare-set").hide();
    $('.image-compare-set[data-image-num="' + slideNumber + '"]').show();
    $(".twentytwenty").twentytwenty(); //line added
}

to ensure twentytwenty() gets called to "refresh" the main container everytime you change slides by clicking the thumbs.