如何使用Javascript在引导模式下显示图像

我无法使用javascript在模式中显示我的照片。当我点击一张照片时，我得到的只是一个弹出的空白模式。我相信这是因为我仍在学习javascript和相关问题并没有多大帮助。如果我能得到你的帮助，我将不胜感激

模态html代码

<!-- photos -->
<div class="container">
    <div class="row">
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image1.jpg" data-target="#trslphotos"><img src="images/image1.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image2.jpg" data-target="#trslphotos"><img src="images/image2.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image3.jpg" data-target="#trslphotos"><img src="images/image3.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image4.jpg" data-target="#trslphotos"><img src="images/image4.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image5.jpg" data-target="#trslphotos"><img src="images/image5.jpg" alt="recent photo"></a>
        </div>
        <div class="col-lg-3 col-md-4 col-xs-6">
            <a href="#" class="thumbnail img-responsive" data-toggle="modal" data-caption="test caption text" data-image="images/image6.jpg" data-target="#trslphotos"><img src="images/image6.jpg" alt="recent photo"></a>
        </div>
    </div>
</div>
<!-- ./photos -->

<!-- modal -->
<div class="modal fade" id="trslphotos" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body"><img src="" class="img-responsive"></div>
            <div class="modal-footer">
                <a class="carousel-control left" href="#recent-photos" data-slide="prev"><i class="glyphicon glyphicon-chevron-left"></i></a>
                <a class="carousel-control right" href="#recent-photos" data-slide="next"><i class="glyphicon glyphicon-chevron-right"></i></a>
            </div>
        </div>
    </div>
</div>
<!-- ./modal -->

---

我不知道你有什么问题，也许这对你有点帮助。尝试收听点击

trslphotos

$（函数（）{
$（'#trslphotos'）。on（'show.bs.modal'，function（）{
$（'.modal body img'）.attr（'src'，”https://i.stack.imgur.com/nukKn.jpg");
//$（'trslphotos'）.modal（'show'）；
});
$（'trslphotos'）。在（'click'，function（）上{
//$（'.modal body img'）.attr（'src'，”https://i.stack.imgur.com/nukKn.jpg");
$（'trslphotos'）.modal（'show'）；
});
});
这是您的解决方案。我只是简单地调用了您的
displayPhotos（）
函数


现在，它将与您的代码配合使用。希望它能帮助你。
请提供足够的信息来调试你的代码。我对您的代码进行了修改，发现未执行
displayPhotos（）
函数。请将其修改为您当前的jquery代码，并更新fiddle.@M.junaidsalat我希望我知道怎么做。就像我说的，我对javascript还是新手，所以我的问题是。我想避免使用像lightbox和code这样的插件。对我应该做什么有什么建议吗？谢谢，这解决了我的问题。但是，当我单击“上一步”和“下一步”按钮时，它们什么也不起作用。我想我也必须使用javascript来解决这个问题。现在我必须很好地学习javascript
function displayPhotos(url) {
 //this should load photos
 $('.modal-body img').attr('src',url);
 //show modal
 $('#trslphotos').modal();
}

$('#trslphotos').on('shown.bs.modal', function (a, b,c) {
 var clickedImageUrl = a.relatedTarget.childNodes[0].src;
  displayPhotos(clickedImageUrl);
})

function displayPhotos(url) {
 console.log(url);
 $('.modal-body img').attr('src',url);
 $('#trslphotos').modal();
}