Multiple Galleries on same page not working

[adulapuram]

I am using multiple galleries on a page. There will be a nav bar and based on the highlighted nav bar item corresponding gallery will be shown. So at a time only one gallery will be shown and others will be in hidden state. The problem is, on clicking of the second tab, image in the gallery is not centered but is displayed on the right. This was because the gallery was initiated with improper dimensions as the gallery was hidden initially.

If i resize/open google inspector then the gallery is adjusting proper. Please visit: http://cyberbel.com/

[Rattus]

Here is what you can add to your tabs javascript code:

jQuery('#galleryCategry a').on('click', function(){
  jQuery('#galleryCategryContanr li.active .realSlider').realSlider('updateSliderSize');
});

[adulapuram]

I tried the above fix, but it shows error that “realSlider is not a function”. The fix can be viewed on my site cyberbel.com

[Rattus]

OK. Try just add below code to the end of your global.js file (delete previous fix):

jQuery(function($){
  $('.navTabs a').on('click', function(){
    var realslider = $('#galleryCategryContanr li.active .realSlider');
    if(realslider.length){
      realslider.realSlider('updateSliderSize');
    }
  });
});

Also it is better if you include global.js file right before </body> tag.

[adulapuram]

I implemented both the suggestions, but still no luck. I guess the problem is with the scope of the realslider()
realslider.length is coming as true and it is pointing to the right slider container, but the realslider() is unavailable.

[Rattus]

Can you give me temporary FTP access to wp-content folder, so I can try to solve your problem? When I run the js code via browser console it works fine.

[Author]

Posts