Not displaying at load but pops up when resizing window

[CybranM]

Hi, I'm using twenty twenty but sometimes the images dont show up at all. If I resize the window it pops up and after that it displays correctly. Is there anything I can to do fix this? I've got it inside a div class with width: 100% !important; but that didnt solve the issue.

Anyone got any ideas on how to solve this?

Thanks

Edit: Adding a 1px border seems to have partially solved the issue, if anyone knows something better it would be nice.

Edit 2: Nvm, adding a 1px border doesn't work all the time. It randomly chooses to not work. It works in in IE and FF but not chrome.

[laurosollero]

I've got the same problem, even tried to call the script after some time but it still seems a bit random when it shows and when it don't. The best timeout was around 300ms.

I've removed the class 'twentytwenty-container' that was there to prevent FUOC and it looks like now it is working, albeit flashing unstyled content...

setTimeout(function() { $(".compare").twentytwenty(); }, 300);

[ghost]

Is there an update to this? I'm having the same issue, which is causing very frustrating results, as I'm trying to use multiple instances of the slider along with Owl Carousel for navigation thumbnails.

It certainly seems very random, sometimes when the page is loaded, the sliders don't load up and the style property of height is set to 0.. causing nothing to display. When resizing the window, it suddenly pops open.

Seems to be a bug?

[ChristopherNeetz]

@laurosollero timeout solution fixes my not loading the correct size issue. Thanks!

[ghost]

Same issue.

[Winterhart]

use this instead form zurb web site : script> $(window).load(function () { $('.twentytwenty-container').eq(0).twentytwenty({ default_offset_pct: 0.33 }); $('.twentytwenty-container').eq(1).twentytwenty(); });

[rubenheymans]

use images loaded https://github.com/desandro/imagesloaded

        $('.before-after').imagesLoaded( function() {
            $('.before-after').twentytwenty();
        });

[bcole808]

Can confirm that the problem occurs when the plugin is initialized before images have fully downloaded.

A helpful patch could be to set a CSS property like this

.twentytwenty-container {
    min-height: 200px;
}

which will help the slider to at least be visible (200px tall) in case it thinks the height should be initialized to 0px.

Another patch could be to add these lines to the plugin itself:

    $(window).load(function() {
        $(window).trigger("resize.twentytwenty");
    });

So that in case the plugin is initialized before images are ready, it will trigger a resize when the document has fully loaded.

[blairdow]

@Winterhart solved it for me! Thanks

[zpelgrims]

@rubenheymans This solution worked for me. Thanks

[GeorgeNicola]

@rubenheymans This solution using "images loaded" worked for me too. Thank you

[laurianne29]

@rubenheymans images loaded worked perfectly for me too. Thanks a lot!

[bitesandtickles]

use images loaded https://github.com/desandro/imagesloaded

        $('.before-after').imagesLoaded( function() {
            $('.before-after').twentytwenty();
        });

Hey there, I am a newbie so I don't know a lot... How do I use this? I have a shopify story but I am unsure where I should put it. Do I only have to put in the

of my site and that's it? Or what else do I need to do? Thanks for any help!

[rubenheymans]

@bitesandtickles yes loading that script is enough. My example code is for jQuery but you can use vanilla javascript too. Read the documentation here https://github.com/desandro/imagesloaded

[bitesandtickles]

@bitesandtickles yes loading that script is enough. My example code is for jQuery but you can use vanilla javascript too. Read the documentation here https://github.com/desandro/imagesloaded

Thank you! I tried using your code but it didn't work for me, do I need to change something in the code to make it fit for me? Thanks for your help, very much appreciated!

[rubenheymans]

@bitesandtickles we should probably discuss this somewhere else. Maybe create a stackoverflow post. Show us what you tried, where you are stuck and link it here. Add your console.log output. Make sure you are using jQuery with my code example.