如何使用數據庫縮略圖中的src將BootClass模式圖像添加到活動狀態？

我有一個從數據庫中取得的縮略圖庫。當你點擊一個縮略圖時，它將以模式打開。我的願望是向它添加旋轉木馬，以便人們可以滑過畫廊。我的問題是，我無法弄清楚如何將活動添加到圖像的模式版本。無論我嘗試過什麼，我都得到了「無法讀取屬性'undefined」的offsetWidth。我是一個新手，並且非常感謝所有的幫助。這也是我的第一個問題，所以我希望我做對了。如何使用數據庫縮略圖中的src將BootClass模式圖像添加到活動狀態？

我的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); 

}); 
});

來源

2017-09-22 sunnydays

你試圖訪問'任何地方offsetWidth'？ –

不，它指的是bootstrap.min.js：6和jquery.min.js：3。我將加載bootstrap.js文件，看看是否可以更確切地看到問題出在哪裏。 – sunnydays

 

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

//for modal wrapper 

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

//for the image 

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

});

請試試這個

來源

2017-09-22 07:43:32

不幸的是我得到了同樣的結果：「當我點擊旋轉木馬控件時，無法讀取'未定義的屬性'offsetWidth'。而且我可以看到它只加載點擊的縮略圖 - 其他圖像都不顯示在元素中。 – sunnydays

如何使用數據庫縮略圖中的src將BootClass模式圖像添加到活動狀態？

回答

相關問題