Wie füge ich AddClass aktiv zum modalen Bootstrap-Image mit src aus der Datenbank-Miniaturansicht hinzu?

Question

Ich habe eine Thumbnail-Galerie aus der Datenbank genommen. Wenn Sie auf ein Miniaturbild klicken, wird es in einem Modal geöffnet. Mein Wunsch ist es, Karussell hinzuzufügen, damit man durch die Galerie gleiten kann. Mein Problem ist, dass ich nicht herausfinden kann, wie man KlasseClass aktiv zur modalen Version des Bildes hinzufügt. Was auch immer ich versucht habe, habe ich "Kann nicht lesen 'OffsetWidth von undefined". Ich bin ein Anfänger und schätze jede Hilfe, die ich bekommen kann. Das ist auch meine erste Frage, also hoffe ich, dass ich es richtig gemacht habe.

Mein 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 --> 

Meine 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'); 

}); 

Bitte versuchen Sie diese