如何使用数据库缩略图中的 src 将Class active 添加到 Bootstrap 模态图像？

Posted 2023-05-08

【中文标题】如何使用数据库缩略图中的 src 将Class active 添加到 Bootstrap 模态图像？

【英文标题】：How do I addClass active to Bootstrap modal image with src from database thumbnail?

【发布时间】：2018-03-03 17:07:38

【问题描述】：

我有一个从数据库中提取的缩略图库。单击缩略图时，它将以模式打开。我的愿望是给它添加旋转木马，这样人们就可以滑过画廊。我的问题是我无法弄清楚如何将活动添加到图像的模态版本。无论我尝试过什么，我都得到“无法读取未定义的属性'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"] . '" />' ;
                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);

 );
);

【问题讨论】：

您是否尝试在任何地方访问offsetWidth？

不，它指的是 bootstrap.min.js:6 和 jquery.min.js:3。我将改为加载 bootstrap.js 文件，看看能否更准确地看到问题出在哪里。

【参考方案1】：

$('#showProductModal').on('shown.bs.modal', function () //用于模态包装 $(this).addClass('active'); //对于图像 $(this).find('img').addClass('active'); );

请试试这个

【讨论】：

不幸的是，当我单击轮播控件时，我得到了相同的结果：“无法读取未定义的属性 'offsetWidth'”。我可以看到它只加载点击的缩略图 - Elements 中没有显示其他图像。