миниатюры не отображаются должным образом в галерее световых коробов

-1

Я использовал световую коробку 2 для создания галереи для моей загрузочной страницы 3. Миниатюры расположены неправильно. Предполагается, что он рассматривается как горизонтальная линия, но показывает вертикальную линию. Кроме того, лайтбокс работает правильно. Ниже мой код.миниатюры не отображаются должным образом в галерее световых коробов

<body> 
    <div class="container"> 
     <h3>Gallery</h3>   
     <div class="gallery"> 
      <div class="row"> 
       <div class "col-lg-3"> 
        <a href="img/1.jpg" data-title="caption" data-lightbox="school"> 
         <img src="img/1.jpg" width="200px" class="img-thumbnail"/> 
        </a> 
       </div> 
       <div class "col-lg-3"> 
        <a href="img/2.jpg" data-title="caption" data-lightbox="school"> 
         <img src="img/2.jpg" width="200px" class="img-thumbnail"/> 
        </a> 
       </div> 
       <div class "col-lg-9"> 
        <a href="img/3.jpg" data-title="caption" data-lightbox="school"> 
         <img src="img/3.jpg" width="200px" class="img-thumbnail"/> 
        </a> 
       </div> 
      </div> 
      <div class="row"> 
       <div class "col-lg-3"> 
        <a href="img/1.jpg" data-title="caption" data-lightbox="school"> 
         <img src="img/1.jpg" width="200px" class="img-thumbnail"/> 
        </a> 
       </div> 
       <div class "col-lg-3"> 
        <a href="img/2.jpg" data-title="caption" data-lightbox="school"> 
         <img src="img/2.jpg" width="200px" class="img-thumbnail"/> 
        </a> 
       </div> 
       <div class "col-lg-3"> 
        <a href="img/3.jpg" data-title="caption" data-lightbox="school"> 
         <img src="img/3.jpg" width="200px" class="img-thumbnail"/> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <script src="js/bootstrap.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
    <script src="js/lightbox.min.js"></script> 
</body>

Я также прилагаю скриншот этого:

the thumbnails are supposed to line up horizentlly

источник

2015-06-20 user3465377

Bootstrap использует сетку с 12 колонками. Для ваших первых трех столбцов используются 'col-lg-3',' col-lg-3' и 'col-lg-9'. Теперь, что делает 3 + 3 + 9 равным ...? – CBroe

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

class="col-lg-2" // or the equivalent

style="width:33%; display:inline-block" // with the equivalent width

Пример:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://stanford.edu/~nisham/bootstrap/js/bootstrap.js"></script> 
 
<script src="http://xcounter.se/lightbox/js/lightbox.min.js"></script> 
 
<body> 
 
    <div class="container"> 
 
     
 
<h3>Gallery</h3> 
 

 
     <div class="gallery"> 
 
      <div class="row"> 
 
       <div style="width:33%; display:inline-block"> <a href="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" data-title="caption" data-lightbox="school"> 
 
         <img src="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" width="200px" class="img-thumbnail"/> 
 
         </a> 
 
       </div> 
 
       <div style="width:33%; display:inline-block"> <a href="https://www.rome2rio.com/images/rome2rio-2.png" data-title="caption" data-lightbox="school"> 
 
         <img src="https://www.rome2rio.com/images/rome2rio-2.png" width="200px" class="img-thumbnail"/> 
 
         </a> 
 
       </div> 
 
       <div style="width:33%; display:inline-block"> <a href="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" data-title="caption" data-lightbox="school"> 
 
         <img src="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" width="200px" class="img-thumbnail"/> 
 
         </a> 
 
       </div> 
 
      </div> 
 
      <div class="row"> 
 
       <div style="width:33%; display:inline-block"> <a href="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" data-title="caption" data-lightbox="school"> 
 
         <img src="http://www.theintentionallife.com/wp-content/uploads/2014/12/1.jpg" width="200px" class="img-thumbnail"/> 
 
         </a> 
 
       </div> 
 
       <div style="width:33%; display:inline-block"> <a href="https://www.rome2rio.com/images/rome2rio-2.png" data-title="caption" data-lightbox="school"> 
 
         <img src="https://www.rome2rio.com/images/rome2rio-2.png" width="200px" class="img-thumbnail"/> 
 
         </a> 
 
       </div> 
 
       <div style="width:33%; display:inline-block"> <a href="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" data-title="caption" data-lightbox="school"> 
 
         <img src="http://static.wixstatic.com/media/6d5967_046bf0297b2343ed87cf116a298746c3.jpg" width="200px" class="img-thumbnail"/> 
 
         </a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body> 
 

 
</html>

источник

2015-06-20 23:49:04 oMiKeY

он хорошо работает с вашим предложением. Огромное спасибо. – user3465377

он хорошо работает с вашим ответом. спасибо за предложение. – user3465377

миниатюры не отображаются должным образом в галерее световых коробов

ответ

Смежные вопросы