Bootstrap Light Box无法正常工作

Question

编辑：

在js代码下面生成一个这样的模态

但有时失败了。它看起来像这样

所以我想要一个解决这个问题的方法

这是html结构

 <div class="col-sm-4">
   <div class="gallery-item shad" style="height : 100px; width:143px;">
     <a href="#">
        @if(empty($service->image)))
          {{HTML::image('image/no-image.png',null,array('style'=>'height : 100px;'))}}
           @else
            {{HTML::image('image/'.$service->image,null,array('style'=>'height : 100px;'))}}
        @endif
     </a>
</div>

file.js

/* copy loaded thumbnails into carousel */
$('.gallery-image img').on('load', function() {
    /*this section execute when i reload the page*/
    console.log('not working');
}).each(function(i) {
   if(this.complete) {
     var item = $('<div class="item"></div>');
     var itemDiv = $(this).parent();

     $(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});

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

当我第一次加载页面时，此代码有效，但是当我重新加载页面并单击图像时，此代码无法正常工作

Answer 1

我可以理解你是在JavaScript的前几行设置模态窗口的内容。尝试在click事件中设置它：

$('.gallery-image').click(function(e){
   e.preventDefault();
   var idx = $(this).parents().parents().index();
   var id = parseInt(idx);
   $('#myModal').modal('show'); // show the modal
   $('#modalCarousel').carousel(id); // slide carousel to selected
   // Update the modal window contents here.
});

Answer 2

最后我找到了解决方案

$('.carousel-inner').find('.item').first().addClass('active');
/* when clicking a thumbnail */
$('.gallery-image').click(function(e){
    e.preventDefault();
    var idx = $(this).parents().parents().index();
    var id = parseInt(idx);

    $("#myModal").modal("show");
    $('#modalCarousel').carousel(id);
});