Bootrap modal-in-modal image carousel issue

Question

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

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

Вот HTML:

<!-- kitchens modal --> 
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog"> 
    <div class="modal-dialog modal-lg"> 
     <div class="modal-content"> 
      <!-- modal header --> 
      <div class="modal-header"> 
       <h1>KITCHENS</h1> 
       <h3>Your dream kitchen is so close...</h3> 
      </div> 
      <!-- end modal header --> 

      <!-- modal body --> 
      <div class="modal-body"> 
       <div class="row"> 
        <div class="col-lg-2 col-sm-3 col-xs-6"> 
         <a href="#"> 
          <img class="thumbnail img-responsive" src="./assets/img/kitchens/kitchen.jpg" alt="Kitchen" title="Kitchen"> 
         </a> 
        </div> 
        <div class="col-lg-2 col-sm-3 col-xs-6"> 
         <a href="#"> 
          <img class="thumbnail img-responsive" src="./assets/img/kitchens/kitchen1.jpg" alt="Kitchen two" title="Kitchen two"> 
         </a> 
        </div> 
       </div> 
      </div> 
      <!-- end modal body --> 

      <!-- modal footer --> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
      <!--end modal footer --> 
     </div> 
    </div> 
</div> 
<!-- end kitchens modal --> 

<!-- inner kitchen gallery modal --> 
<div class="modal" id="myModal" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h3 class="modal-title"></h3> 
      </div> 

      <div class="modal-body"> 
       <div id="modalCarousel" class="carousel"> 
        <div class="carousel-inner"> 

        </div> 

        <a class="carousel-control left" href="#modaCarousel" data-slide="prev"> 
         <i class="glyphicon glyphicon-chevron-left"></i> 
        </a> 
        <a class="carousel-control right" href="#modalCarousel" data-slide="next"> 
         <i class="glyphicon glyphicon-chevron-right"></i> 
        </a> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
<!-- end inner kitchen gallery modal --> 

И CSS:

.thumbnail { 
    height: 100px; 
    margin: 6px; 
} 

.thumbnail { 
    margin-bottom: 6px; 
} 


.carousel-control.left, 
.carousel-control.right { 
    background-image: none; 
    margin-top: 10%; 
    width: 5%; 
} 

И, наконец, JS:

$('.row .thumbnail').on('load', function() { 

}).each(function(i) { 
    if(this.complete) { 
     var item = $('<div class="item"></div>'); 
     var itemDiv = $(this).parents('div'); 
     var title = $(this).parent('a').attr("title"); 

     item.attr("title", title); 
     $(itemDiv.html()).appendTo(item); 
     item.appendTo('.carousel-inner'); 
     if (i === 0) { // set first item active 
      item.addClass('active'); 
     } 
    } 
}); 

/* activate the carousel */ 
$('#modalCarousel').carousel({interval: false}); 

/* change modal title when slide changes */ 
$('#modalCarousel').on('slid.bs.carousel', function() { 
    $('.modal-title').html($(this).find('.active').attr("title")); 
}); 

/* when clicking a thumbnail */ 
$('.row .thumbnail').click(function(){ 
    var idx = $(this).parents('div').index(); 
    var id = parseInt(idx); 
    $('#myModal').modal('show'); // show the modal 
    $('#modalCarousel').carousel(id); // slide carousel to selected 
}); 

Я получил от этого модальных галерей я нашел в Интернете , и немного изменил его, но он просто не сработает! Когда я открываю модальный файл и нажимаю на миниатюру, второй модальный имеет только все эскизы, а не одно изображение.

Если кто-нибудь может мне помочь, я уверен, что это что-то глупое и простое. Спасибо!

Answer 1

Вы можете попробовать что-то вроде:

$('.kitchens-modal .thumbnail').each(function(i) { 
 
    var item = $('<div class="item"></div>'); 
 
    var itemDiv = $(this).parents('div'); 
 
    var title = $(this).parent('a').attr("title"); 
 

 
    item.attr("title", title); 
 
    $(itemDiv.html()).appendTo(item); 
 
    item.appendTo('.carousel-inner'); 
 
    if (i === 0) { // set first item active 
 
     item.addClass('active'); 
 
    } 
 
}); 
 

 
/* activate the carousel */ 
 
$('#modalCarousel').carousel({interval: false}); 
 

 
/* change modal title when slide changes */ 
 
$('#modalCarousel').on('slid.bs.carousel', function() { 
 
    $('.modal-title').html($(this).find('.active').attr("title")); 
 
}); 
 

 
/* when clicking a thumbnail */ 
 
$('.row .thumbnail').click(function(){ 
 
    var idx = $(this).parents('div').index(); 
 
    var id = parseInt(idx); 
 
    $('#myModal').modal('show'); // show the modal 
 
    $('#modalCarousel').carousel(id); // slide carousel to selected 
 
});

.thumbnail { 
 
    height: 100px; 
 
    margin: 6px; 
 
} 
 

 
.thumbnail { 
 
    margin-bottom: 6px; 
 
} 
 

 

 
.carousel-control.left { 
 
    background-image: none; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 25px; 
 
    height: 100%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.carousel-control.right { 
 
    background-image: none; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 0; 
 
    width: 25px; 
 
    height: 100%; 
 
    transform: translateY(-50%); 
 
} 
 

 
.item .thumbnail { 
 
    margin: 0 auto; 
 
} 
 

 
body { 
 
    margin: 20px !important; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="btn btn-primary" data-target="#kitchens-modal" data-toggle="modal">Open Kitchen Modal</div> 
 

 
<!-- kitchens modal --> 
 
<div class="modal kitchens-modal fade" id="kitchens-modal" role="dialog"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
      <!-- modal header --> 
 
      <div class="modal-header"> 
 
       <h1>KITCHENS</h1> 
 
       <h3>Your dream kitchen is so close...</h3> 
 
      </div> 
 
      <!-- end modal header --> 
 

 
      <!-- modal body --> 
 
      <div class="modal-body"> 
 
       <div class="row"> 
 
        <div class="col-lg-2 col-sm-3 col-xs-6"> 
 
         <a href="#"> 
 
          <img class="thumbnail img-responsive" src="http://placehold.it/200x200" alt="Kitchen" title="Kitchen"> 
 
         </a> 
 
        </div> 
 
        <div class="col-lg-2 col-sm-3 col-xs-6"> 
 
         <a href="#"> 
 
          <img class="thumbnail img-responsive" src="http://placehold.it/300x300" alt="Kitchen two" title="Kitchen two"> 
 
         </a> 
 
        </div> 
 
       </div> 
 
      </div> 
 
      <!-- end modal body --> 
 

 
      <!-- modal footer --> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
      </div> 
 
      <!--end modal footer --> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!-- end kitchens modal --> 
 

 
<!-- inner kitchen gallery modal --> 
 
<div class="modal" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h3 class="modal-title"></h3> 
 
      </div> 
 

 
      <div class="modal-body"> 
 
       <div id="modalCarousel" class="carousel"> 
 
        <div class="carousel-inner"> 
 

 
        </div> 
 

 
        <a class="carousel-control left" href="#modalCarousel" data-slide="prev"> 
 
         <i class="glyphicon glyphicon-chevron-left"></i> 
 
        </a> 
 
        <a class="carousel-control right" href="#modalCarousel" data-slide="next"> 
 
         <i class="glyphicon glyphicon-chevron-right"></i> 
 
        </a> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div> 
 
<!-- end inner kitchen gallery modal --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

Надеется, что это помогает!