slider image drops down to thumbnail size when changing tabs

tom.pam.miller's Avatar

tom.pam.miller

09 Aug, 2017 07:49 PM

I am using tabs on my ukulele pages and have sliders in each tab (Tabby Responsive Tabs and Wordpress RoyalSlider).
http://tommillerguitars.com/ukuleles/curly-mahogany-cedar-ukulele/
On a desktop, if I change the size of the browser window while viewing one tab (Chrome or IE), the other tab will show the image as thumbnail size until I resize the browser window or click on slider fullscreen.
iPad and iPhone: if you scroll the page while on one tab, clicking to the next tab will have the image size of thumbnail. Scrolling the page on the new tab will reset to the correct image size, or click slider fullscreen.
I believe that I have included the code from your page "slider content area shrinks" in my child theme functions.php but the issue persists.
It feels like I need to updateSliderSize when clicking on the new tab but I have not found a way.
Do you need admin password for the website?

  1. Support Staff 1 Posted by Dmitry Semenov on 10 Aug, 2017 05:14 AM

    Dmitry Semenov's Avatar

    Hello,

    The code that you added to functions PHP is for jQuery UI itabs. You're using less popular Tabby script, it seems it doesn't dispatch any events when tabs change, so you may try simply listening for click on a tab event, something like this should work:

    jQuery('.responsive-tabs__list__item').click(function() {
      jQuery('.responsive-tabs__panel--active').find('.royalSlider').royalSlider('updateSliderSize');
    });
    
  2. 2 Posted by tom.pam.miller on 10 Aug, 2017 07:23 PM

    tom.pam.miller's Avatar

    Dmitry,

    Thanks for the rapid response.

    I have not been successful implementing the jQuery script to fix the issue.
    I embedded it in the royalslider_fix_tabs function in my functions.php file
    in the child theme, in place of the jQuery ui code. I also tried to
    implement it in a .js file in my child theme js folder, with wp enqueue
    scripts in functions.php.

    Since this is wp version, should royalSlider references be new_royalSlider?

    Thanks,
    Tom Miller

  3. Support Staff 3 Posted by Dmitry Semenov on 10 Aug, 2017 08:05 PM

    Dmitry Semenov's Avatar

    You added the code correctly.

    It seems the issue appears now because tabs script is initialized after the above code is executed. Either move tabs initialization code, if you can, or add delay to above method, for example:

    setTimeout(function() {
      jQuery('.responsive-tabs__list__item').click(function() {
        jQuery('.responsive-tabs__panel--active').find('.royalSlider').royalSlider('updateSliderSize');
      });
    }, 50);
    

    (will delay for 50ms)

  4. 4 Posted by tom.pam.miller on 10 Aug, 2017 08:25 PM

    tom.pam.miller's Avatar

    The delay worked perfectly.

    Thanks again.

    Tom

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