데이터베이스 축소판의 src와 함께 부트 스트랩 모달 이미지에 활성 클래스를 추가하려면 어떻게해야합니까?

Question

데이터베이스에서 가져온 미리보기 갤러리가 있습니다. 미리보기 이미지를 클릭하면 모달로 열립니다. 내 소원은 갤러리에 슬라이드 할 수 있도록 슬라이드 쇼를 추가하는 것입니다. 내 문제는 이미지의 모달 버전에 활성 클래스를 추가하는 방법을 알 수 없다는 것입니다. 내가 시도한 것이 든, "정의되지 않은"offsetWidth 속성을 읽을 수 없습니다. 나는 이것에 초보자이고 모든/내가 얻을 수있는 도움을 주셔서 감사합니다. 이것은 또한 나의 첫 번째 질문이기 때문에 나는 그것을 올바르게했기를 희망한다.

내 PHP :

<div class="container text-center work"> 
     <div class="row"> 
     <?php 
      $link = mysqli_connect ("xxx", "xxx", "xxx", "xxx") or die("Kunde inte koppla upp mig mot databasen"); 
      mysqli_set_charset($link,"utf8"); 
      $result = mysqli_query($link, "SELECT * FROM paper") or die ("Kunde inte ställa frågan"); 

      while($rows = mysqli_fetch_array($result)){ 

       echo '<div class="box1 col-lg-3 col-md-4 col-sm-6">'; 
       echo "<a data-toggle='modal' data-target='#showProductModal'>"; 
       echo '<img class="thumbnail img-responsive" src="images/' . $rows["name"] . '" alt="' . $alt .'"/>' ; 
       echo '</a>'; 
       echo "</div>"; 
      } 
     ?> 
    </div><!--/.row --> 
</div><!--/.work -->   



<div id="showProductModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 
     <div class="modal-content non-radius non-border"> 
      <div class="modal-header"> 
       <a role="button" data-dismiss="modal" title="Close"><i class="fa fa-times x" aria-hidden="true"></i></a> 
      </div> 
      <div class="modal-body col-lg-12" > 
       <div id="art" class="carousel slide" data-interval="false" data-ride="carousel"> 
        <div class="carousel-inner"> 
         <img class='mod img-responsive' src=''/> 
        </div> 
       </div> 
       <a class="left carousel-control" href="#art" role="button" data-slide="prev"> 
       <i class="fa fa-angle-left" aria-hidden="true"></i></a> 
       <a class="right carousel-control" href="#art" role="button" data-slide="next"> 
       <i class="fa fa-angle-right" aria-hidden="true"></i></a> 
      </div><!--/.modal-body --> 
     </div><!--/.modal-content --> 
    </div><!--/.modal-dialog --> 
</div><!--/#showProductModal --> 

내 JS :

$(document).ready(function(){ 

$('.thumbnail').click(function() { 
    var src = $(this).attr('src'); 
    $('.mod').attr('src', src); 

}); 
}); 

Answer 1

 

$('#showProductModal').on('shown.bs.modal', function() { 

//for modal wrapper 

    $(this).addClass('active'); 

//for the image 

    $(this).find('img').addClass('active'); 

}); 

이 시도하십시오