Bootpat modal-mode-image圖像傳送帶問題

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>

希望這有助於！