如何使用数据库缩略图中的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模式图像添加到活动状态？

回答

相关问题