Bootstrap Light Box не работает должным образом

Question

Отредактировано:

Ниже JS кода генерируют модальность как этот

, но когда-нибудь он fails.And это выглядит как этот

Так я хочу решение для этой проблемы

Это 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); 
});