CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapslideshow
farjam
farjam

Reputation: 2289

Using multiple image galleries inside Twitter Bootstrap Tabs

I have created 3 image galleries based on SlidesJS and placed them inside Twitter Bootstrap Tabs.

You can see the demo here.

As you can see, the galleries are correctly populated and placed inside the tabs; however, the images for the second and third galleries are not displayed.

I'm guessing this might be something with the content of the tabs being hidden and conflicting with the gallery css?

Do you have any solution?

Answer:

Based on the suggestion below, I ended up using it this way:

$(document).ready(function(){
    $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
    $("#gallery-tab a").each(function( index ) {
        $(this).on('shown', function(){
            $('#slides' + index).slidesjs({ width: 918, height: 200, navigation: false });
        });
    });
});

Upvotes: 0

Views: 1466

Answers (1)

isherwood
isherwood

Reputation: 61083

The most common problem with most tab scenarios is that you're initializing your galleries when the tabs are hidden, and therefore the plugin cannot calculate sizes and perform other actions on tab child elements which aren't visible.

You can 1) initialize the gallery plugin on tab select, or 2) use something like {position: absolute; left: -999em;} instead of {display: none} to hide tabs.

UPDATE: Based on your comment, this should work... 

$('#gallery-tab a:first[data-toggle="tab"]').on('shown', function () {
   $('#slides0').slidesjs({ width: 918, height: 200, navigation: false });
})

Upvotes: 1

Related Questions