Home → Suggestions →

slider image drops down to thumbnail size when changing tabs

• Edit

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

   

   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');
   });
   

   • Edit

2. 2 Posted by tom.pam.miller on 10 Aug, 2017 07:23 PM

   

   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

   • Edit

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

   

   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)

   • Edit

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

   

   The delay worked perfectly.

   Thanks again.

   Tom

   • Edit