Использование нескольких картинных галерей внутри Twitter Загрузочные вкладки

Question

Я создал 3 галереи изображений на основе SlidesJS и разместил их внутри Twitter Bootstrap Tabs.

Здесь вы можете увидеть demo.

Как вы можете видеть, галереи правильно заполнены и размещены внутри вкладок; однако изображения для второй и третьей галерей не отображаются.

Я предполагаю, что это может быть что-то, что содержимое вкладок скрыто и противоречит галерее css?

У вас есть решение?

Ответ:

На основе ниже предложения, я в конечном итоге использовать его таким образом:

$(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 }); 
     }); 
    }); 
});  

Answer 1

Наиболее распространенная проблема большинства вкладок сценариев является то, что вы инициализацией ваши галереи, когда вкладки скрыты, поэтому плагин не может рассчитать размеры и выполнить другие действия над дочерними элементами вкладки, которые не видны.

Вы можете: 1) инициализировать плагин галереи на вкладке выбора, или 2) использовать что-то вроде {position: absolute; left: -999em;} вместо {display: none}, чтобы скрыть вкладки.

UPDATE: Исходя из вашего комментария, это должно работать ...

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