Проблема с получением Оправданной Галереи, работающей в Bootstrap 4 Tabs - PullRequest
0 голосов
/ 12 октября 2018

У меня есть страница, которую я пытаюсь завершить, которая имеет внутреннюю систему меню с вкладками, и внутри них (первая и последняя вкладка) есть обоснованные галереи

http://miromannino.github.io/Justified-Gallery/

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

Я провел дополнительное тестирование и выяснил, чтопричина, по которой это работало на первой вкладке, а не на последней, заключалась в том, что на первой вкладке был активный класс, что делало div блоком (display: block), и как только я включил активную на другую вкладку, он сделалГалерея работает, но, очевидно, сломал вкладки.

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

<div class="middleContent">
  <div class="container">
    <div class="row">
      <div class="col-sm-9 leftContent">
        <ul class="nav nav-tabs" role="tablist">
          <li class="nav-item"> <a class="nav-link active" data-toggle="tab" href="#orderOnline" role="tab">Menu</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#reviews" role="tab">Reviews</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#about" role="tab">About</a> </li>
          <li class="nav-item"> <a class="nav-link" data-toggle="tab" href="#photos" role="tab">Photos</a> </li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
          <div class="tab-pane active" id="orderOnline" role="tabpanel">
            <div class="row">
                <h2>MENU</h2>

                <div id="mygallery" >
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
                    </a>
                </div>


            </div>
          </div>
          <div class="tab-pane" id="reviews" role="tabpanel">
            <h2>Reviews</h2>
          </div>
          <div class="tab-pane" id="about" role="tabpanel">
            <h2>About</h2>
          </div>
          <div class="tab-pane" id="photos" role="tabpanel">
            <div>
                <div>
                    <h2>Food</h2>

                    <div id="foodgallery">
                        <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-10.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-10.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-11.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-11.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-12.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-12.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-13.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-13.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-14.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-14.jpg"/>
                    </a>
                    <a data-fancybox="menu-gallery" href="images/restaurantPage/imagemenu/238-m-15.jpg">
                        <img alt="imgSEO" src="images/restaurantPage/imagemenu/238-m-15.jpg"/>
                    </a>

                    </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

jQuery:

<script>
    $('#mygallery').justifiedGallery({
        rowHeight: 300,
        lastRow: 'nojustify',
        randomize: false,
        margins: 10
    });
</script>

<script>
    $(function(){
        $('#foodgallery').justifiedGallery({
            rowHeight: 200,
            lastRow: 'nojustify',
            randomize: false,
            margins: 10
        });
    }); 
</script>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...