引导灯箱无法正常工作答案

【问题标题】：Bootstrap Light Box not working properly引导灯箱无法正常工作
【发布时间】：2015-06-17 08:50:31
【问题描述】：

已编辑：

下面的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>

文件.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
});

此代码在我第一次加载页面时有效，但是当我重新加载页面并单击图像时，此代码不起作用

【问题讨论】：

无法理解您想说什么！能改一下吗？
我现在更新问题。请看看
超级，那么你在哪里设置模态窗口的内容呢？
file.js 文件的前几行
查看答案！

标签： javascript jquery twitter-bootstrap

【解决方案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.
});

【讨论】：

你需要在那里做！
我照你说的做了。但问题不存在。
我需要在页面加载时将所有图像附加到模态的 js 代码

【解决方案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);
});

【讨论】：