Js conflict with expand/collapse and image slider

[jon_zal]

Page in question is HERE.

The page contains a series of expandable/collapsible sections, the last of which bears the heading “Photoshop.” When expanded, that section is supposed to reveal four different images, each equipped with a slider that allows the user to drag from side-to-side in order to see before/after versions of each image.

When not nested inside the expandable/collapsible section, the images load properly, as seen in the example image I have included beneath the collapsed “Photoshop” section.

I believe this to be a JavaScript conflict, but I am not fluent in js, and do not know how to solve for it. Any assistance you can provide would be greatly appreciated.

[jon_zal]

Update: The example image I mentioned above apparently isn’t showing up consistently; this is how it should appear:

Additional info: It appears that the inline-style height & width measurements for the respective div & img tags are js-generated, and are sometimes populating for the example image, which results in the example image showing up, but are sometimes set to “0” for the example image, and are always set to “0” for images contained within the expandable/collapsible “Photoshop” section.

[m_hutley]

Well for starters, something’s calling twentytwenty on the ones inside the accordion twice…

inside (note the two divs at the top with the same classes)

the one that works on the outside of the accordion

[jon_zal]

Hm. Good call. I’ve removed the duplication, but still experiencing the same problem.

More background: The before/after sliders are created via a plugin, and would normally be entered via shortcode in the CMS for the page, but I’ve hardcoded all of the output in the main content region on this page, with the exception of the example image.

FWIW: If I nest the images in an expandable/collapsible section, but make the default behavior such that the section loads as open, and then click on the h2 to close it, the slider image loads fine; if I inspect the code, I can see that the div.bafg-twentytwenty-container has the correct inline styles for height and width, and the before/after img tags have correctly sized dimensions for the slider, all of which persist when the section is then closed. However, all of those dimensions are set to “0” if the section first loads as closed, and persist as “0” when the section is then opened.

I have updated the example image such that it is now nested in an expandable/collapsible section that defaults to the “open” setting so you can see what I mean when you click on the h2.

Hope this helps. Thanks again for taking a look.

[m_hutley]

Yeah, it’s probably because when the twentytwenty code runs, it pulls information on the display size of the images, which if they’re inside a collapsed accordion will be nonexistant. (Note: I am making assumptions here, i havent read the twentytwenty library to know for sure)

Just trying to think of a good way around the problem…or at least, the least destructive one.

Stupid idea, but… set your accordion code for the photoshop section to not start collapsed. Then add a script tag to the bottom of your page containing…

<script>
let hasloaded = false;
jQuery(window).on("resize.twentytwenty", function() {
   if(hasloaded) { return; }
   hasloaded = true;
   jQuery(".title.open").click();
})
</script>

It’s… not the right solution, but… it might work, until someone has a better answer than me. (Won’t take long.)
I am laboring under the belief that you have no ability to modify the files in the plugins directory. Because bafg-custom-js instantiates the twentytwenties on load, rather than them being in view, i believe is the source of the problem.

[jon_zal]

Thank you very much for the suggestion. “Right” or not, I’m happy to use it! And it almost is working now; the new wrinkle is that, when I expand the “Photoshop” section, I then have to scroll at least one pixel in order for the images to appear.

Additional info: I am, in fact, able to modify the plugin files as needed … though 1.) I’m unsure what to modify, and 2.) I’m obviously hesitant to do so, as any subsequent updates by the plugin developer will overwrite my changes.

Thanks again for your assistance. I greatly appreciate your help.

-JZ

[m_hutley]

okay… i’m… going to say that’s because the twentytwenty resize event isnt parsed at the end of the animation slide but it is on scroll…
the solve to that is… definitely isnt stalling for time while writing a post and trying to think at the same time…
In your portfolio.js you have this:

        $(this.nextElementSibling).slideToggle(300);

… =>

        $(this.nextElementSibling).slideToggle(300, function() { jQuery(window).trigger("resize.twentytwenty"); });

Bascially, “at the end of the accordion-ing, re-evaluate the size of the images for twentytwenty”.

[jon_zal]

That did the trick! Thank you so much for all your help. Really appreciate it!

-JZ