[Filmstrip Slider] Cannot add slider to all tabs

Desmond Lai created the topic: [Filmstrip Slider] Cannot add slider to all tabs

I am having an issue when putting the filmstrip slider to the tab (a components from Vamtam).

When I put the 3 different slider shortcode to 3 tabs, only the first tab can show the slider. It is empty when I click to the second and third tab. However, I saw the at least 3 pre-loading logo when the webpage was still loading.

Another issue is when switching the tab, slider on the first page sometimes stopped working.

Anything can help on this ?

The website link: sweetable.hk/gallery/

#33919

Please Log in or Create an account to join the conversation.


Support replied the topic: [Filmstrip Slider] Cannot add slider to all tabs

Dear Desmond,

Most probably there is a Javascript problem with tabs plugin. Could you please contact us to [email protected] and let us check the problem? Please send temporary admin access credentials. We will take a look and provide a solution to the issue as soon as possible.

Also indicate the URL to your forum topic in the e-mail subject.
Thank you.


Best regards,
Web-Dorado team


Joomla extensions ,
Wordpress plugins ,
Drupal modules
#33943

Please Log in or Create an account to join the conversation.


Support replied the topic: [Filmstrip Slider] Cannot add slider to all tabs

There are two problems regardin to this.
1. Slider does not work when pasted INSIDE tabbed content. The reason is the slider inherits the size of container on beginning when all its images are loaded. It takes the width of the container and fits inside. But two other tabbed content containers do not have correct size when hidden.

We noticed that you placed slider shortcode outside of tabbed contents, probably because of this reason. There is no need to add jQuery from external sources it already is loaded with WordPress core. So we removed that.
We changed custom javascript code in theme options to the following:

function wds_slider_tabs(){
 var hash = window.location.hash.substring(1);
 if(hash == 'tabs-10'){
jQuery('#wds_container1_0').show();
  jQuery('#wds_container1_1').hide();
  jQuery('#wds_container1_2').hide();
 }
 else if(hash == 'tabs-11'){
jQuery('#wds_container1_0').hide();
  jQuery('#wds_container1_1').show();
  jQuery('#wds_container1_2').hide();
 }
else if(hash == 'tabs-12'){
  jQuery('#wds_container1_0').hide();
  jQuery('#wds_container1_1').hide();
  jQuery('#wds_container1_2').show();
}
}
window.onhashchange = function(){ wds_slider_tabs();}
jQuery(document).ready(function(){
wds_slider_tabs();
})

This function checks whether on the beginning hash part of the url is set (for example "#tabs-11") and shows only corresponding slider.
When certain tab is clicked, it watches the change of hash component of the url and again shows or hides sliders acoordingly.


2. The second problem is that slider does not work correctly when is hidden, because the code changing images (with or without effects) uses slider sizes, which are zero when hidden.

That is why we turned off autoplay features of sliders. Only slider which does not change images when is hidden can work properly.

Thank you.


Best regards,
Web-Dorado team


Joomla extensions ,
Wordpress plugins ,
Drupal modules
#34575

Please Log in or Create an account to join the conversation.


Time to create page: 0.176 seconds
Powered by Kunena Forum

WORLD-CLASS SUPPORT

We are here for you every step of the way. Turn to our support with any questions you might have about our products and services. Our experienced customer care team is available to help you as fast as we possibly can.

Contact us