• Resolved Matt Cromwell

    (@webdevmattcrom)


    I created two “Viewer” Galleries independently. Then I used the shortcode to embed them both on the same page, but in a tabbed interface using the Kadence Tab Block.

    The Gallery that is hidden on page load, doesn’t load correctly when you switch to that tab.

    How can I get it to load correctly?

    Thank you!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Author GalleryCreator

    (@gallerycreator)

    The second gallery (Deutsch) is built in a container (div) that does not have width, so an error occurs in the slider (display: none;)
    To fix this, you need to modify the Kadence Tab Block or look for a block that hides tabs not by changing the display property (none /
    block).

    Thread Starter Matt Cromwell

    (@webdevmattcrom)

    Hi there @gallerycreator Thanks, you helped me understand the issue better. I happen to work with the creator of KadenceWP and he helped me understand it as well from their perspective. Here’s the message, and a workaround for anyone who also uses Kadence Blocks:

    Tabs use display none because this is the best for a number of reasons but dynamic javascript driven stuff can’t load in a display none area. To counter this we create a resize event when you switch tabs because anything that is javascript driven will usually have a resize listener that causes the render to update if the screen resizes. This is why most anything will work in the tabs block. The gallery/slider plugin you are using doesn’t appear to have a javascript listener for resize events. You can see this if you load your page on desktop and drag the screen to mobile, the thumbnails will all be in a line instead of paginated.

    While this should be updated in that plugin to have a resize listener, you can also use css to change the way tabs are hidden/shown. Here is the css:

    .kt-tabs-wrap .wp-block-kadence-tab[role="tabpanel"] {display: block !important;visibility: hidden;height: 0;padding: 0;} .kt-tabs-wrap.kt-active-tab-1>.kt-tabs-content-wrap>.kt-inner-tab-1, .kt-tabs-wrap.kt-active-tab-2>.kt-tabs-content-wrap>.kt-inner-tab-2, .kt-tabs-wrap.kt-active-tab-3>.kt-tabs-content-wrap>.kt-inner-tab-3, .kt-tabs-wrap.kt-active-tab-4>.kt-tabs-content-wrap>.kt-inner-tab-4, .kt-tabs-wrap.kt-active-tab-5>.kt-tabs-content-wrap>.kt-inner-tab-5, .kt-tabs-wrap.kt-active-tab-8>.kt-tabs-content-wrap>.kt-inner-tab-6 { visibility: visible; height: auto; padding:20px; }

    So I think it’s a reasonable feature request for you all to add a JS listener for resize events.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Multiple Viewer Galleries on the Same Page within Tabs’ is closed to new replies.