Using Multiple WP Galleries and Royalslider and Bootstrap Tabs

Kevin's Avatar

Kevin

01 Jun, 2018 11:33 AM

I am using Bootstrap Tabs to create different tabs of Content on a single WordPress page. The content areas in the panels allow for WordPress Galleries and I am using Royalslider to format these Galleries.

I have a page where there is a Gallery on the initial active tab, which displays correctly, and a second gallery on another tab.

When I switch to that second tab the Gallery does not display properly. The .rsOverFlow .grab-cursor div is set to 100px. So my initial active image is not displaying to its full width. And the .rsThumbsContainer is set to 1420px so the thumbs ribbon is not displayed properly (the first visible thumbnail is set to the same 100px as the image). On the correctly displaying gallery, the .rsOverflow .grab-cursor div is set to 825px and the .rsThumbsContainer is 994px.

One strange thing is that if I use the browser tool Inspect Element, the incorrect gallery adjusts its and displays normally. But then when I switch tabs, the other gallery displays incorrectly.

I have tried viewing this page on different browsers and the issues is the same so it is not browser-specific.

I first noticed that both these galleries were using the same ID (the gallery ID I have in Royalslider set to display WordPress galleries), so I used a filter function you suggested for another issue to give them unique IDs (new_rs_slides_output_before_end). This is working and each of the sliders has a unique ID, but it does not fix the problem I describe above.

Can you think of why this is happening? If I create two galleries in the same panel, they both display correctly. It is only when a second gallery is placed on a non-active panel that it displays incorrectly when you reveal that panel.

  1. Support Staff 1 Posted by Dmitry Semenov on 01 Jun, 2018 03:13 PM

    Dmitry Semenov's Avatar

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac