Question

I need a flexslider in jQuery UI tabs. Here is the link to a test server. I don’t know how many tabs I have because they are created dynamically with PHP. The problem is that when I fire a flexslider trigger it recognize only images from the first tab. Images in other tabs appear wit width 0 because other tabs are hidden and flexslider can not do it’s math with images. The easy solution would be to use off-left-technique but ui-tabs-hide class is deprecated in jquery-ui-1.9.1 which I am using. Rolling back to 1.8 conflicts with WordPress 3.5.1 which I happen to use too. So the only solution I see is to trigger flexslider on each tab activation. So that’s what I do:

First I trigger flexslider after all libraries and images on page are loaded:

$(window).load(function() {
    $('.flexslider-doors').flexslider({
        animation: "slide",
        animationLoop: false,
        itemWidth: 64,
        itemMargin: 30,
        controlNav: false
    });

});

And then on each tab activation I trigger flexslider again:

jQuery( "#colorTabs" ).tabs({
    activate: function( event, ui ) {
        jQuery('.flexslider-doors').flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 64,
            itemMargin: 30,
            controlNav: false
        });
    }
});

The problem is that it works only the first time I switch tabs. Second time images do not appear. And the interesting thing is that if I for example go to another website or open Photoshop or something else and then come back images on broken tab are at their place and slider works as expected. Switch to another tab – no images. Do same thing with going to another website – everything fixed. I’m stuck =(

http://print-copy74.ru/test/catalog/line-5000/

Answer 1

Finally fixed this issue. Not sure where the problem was but that’s what i did:
First i fire jquery ui tabs as usual:

jQuery( "#colorTabs" ).tabs();

Then i fire the flexslider only on first tab so when page loads slider works as charm:

jQuery('#tabs-1 .flexslider-doors').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 64,
    itemMargin: 30,
    controlNav: false
});

Magic begins after that:

jQuery('#colorTabs').bind('tabsshow', function(event, ui) {
    var index = ui.index +1;
    var tab = "#tabs-" + index + " .flexslider-doors";
    if ( index > 1 ) { 
        jQuery( tab ).flexslider({
            animation: "slide",
            animationLoop: false,
            itemWidth: 64,
            itemMargin: 30,
            controlNav: false
        });
    }
});

On each tab change i get the tab index, add 1, so the first tab is 1 and not 0, then i construct the string that contains tab id and flexslider class, and finally i fire flexslider only on current tab. That’s it =)