Question

我有一个从数据库中截取的缩略图库。单击缩略图时，它将以模态打开。我的愿望是添加旋转木马，以便人们可以滑过画廊。我的问题是我无法弄清楚如何将addClass激活到图像的模态版本。无论我尝试过什么，我都得到了＃34;无法读取属性＆＃39; offsetWidth＆＃39;未定义＆＃34;。我是这里的新手，感谢我能得到的所有/任何帮助。这也是我的第一个问题，所以我希望我做得对。

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

});

请试试这个

如何使用数据库缩略图中的src将addClass激活到Bootstrap模态图像？

1 个答案: