Исчезает галерея на js, в чем проблема?

Question

[paramid]

Такая проблема:
Есть табы, хочу в таб впихнуть галерею на jaliswall.js, если не вставлять в таб, то галерея отображается и работает, но как только ставлю в таб, то исчезает. Понятно, что конфликтует js, но отловить не получается.
Табы на бутстрапе.

// код галереи
<div class="wall"> <div class="wall-item" href="#"> <img src="https://unsplash.it/2500/1667?image=14" />
  <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div class="wall-item"> <img src="https://unsplash.it/800/600?image=30" />
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div class="wall-item"> <img src="https://unsplash.it/2758/3622?image=35" />
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div class="wall-item"> <img src="https://unsplash.it/2000/1333?image=37" />
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div class="wall-item"> <img src="https://unsplash.it/4000/2670?image=29" />
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
  <div class="wall-item"> <img src="https://unsplash.it/3008/2008?image=21" />
    <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
  </div>
</div>

<div id="myTabContent" class="tab-content">
// если вставить сюда, то не пропадает, но отображается на всех табах, что логично
        <div role="tabpanel" class="tab-pane fade" id="rates" aria-labelledby="rates-tab">
// если вставить сюда, то пропадает

не знаю что ещё приложить, в песочнице не получилось развернуть сию конструкцию.
jaliswall.js
сейчас галерея вставлена поверх нужно таба и отобр...

Comments

[rejjer]

Пробовали выполнять инициализацию галереи при выборе нужного таба?

[Павел]

все же разместите код на https://codepen.io . Пусть он не работает но мы будем знать суть

Answer 1

[vaskadogana]

90% что проблема в том, что у таба стиль display: none;
а слайдер инициализуруется на онлоад и считает что такого элемента нет.
попробуйте вставить в активный таб, чтобы проверить, если так то решением будет запуск слайдера по клику на таб

Comments

[paramid]

да, в активном работает..похоже и правда дело в display:none;
спасибо, ща попробую решить

[paramid]

сделал появление на

$( "a#rates-tab" ).click(function() {
$('.wall').jaliswall({item:'.wall-item'});
});

это дело впихнул в jQuery(document).ready(function($) { common.js
всё равно не работает, с активным табом клик работает

[paramid]

common.js

jQuery(document).ready(function($) {



$('.owl-carousel').owlCarousel({
    loop:true,
    margin:0,
	padding:0,
    dots:true,
    animateOut: 'fadeOut',
    animateIn: 'fadeIn',
    items:1,
	autoplay:true,
    smartSpeed:450
});




});
(function($) {

  'use strict';

  $(document).on('show.bs.tab', '.nav-tabs-responsive [data-toggle="tab"]', function(e) {
    var $target = $(e.target);
    var $tabs = $target.closest('.nav-tabs-responsive');
    var $current = $target.closest('li');
    var $parent = $current.closest('li.dropdown');
		$current = $parent.length > 0 ? $parent : $current;
    var $next = $current.next();
    var $prev = $current.prev();
    var updateDropdownMenu = function($el, position){
      $el
      	.find('.dropdown-menu')
        .removeClass('pull-xs-left pull-xs-center pull-xs-right')
      	.addClass( 'pull-xs-' + position );
    };

    $tabs.find('>li').removeClass('next prev');
    $prev.addClass('prev');
    $next.addClass('next');

    updateDropdownMenu( $prev, 'left' );
    updateDropdownMenu( $current, 'center' );
    updateDropdownMenu( $next, 'right' );

  });
$( "a#rates-tab" ).click(function() {
$('.wall').jaliswall({item:'.wall-item'});
});


})(jQuery);