javascript - 在 Bootstrap 中放大图像 :- changes all images to enlarged image

Question

我想在用户点击图片时显示放大图片。然后我按照步骤 形成这个How to use bootstrap modal on multiple images on same page on image click?
但现在当我点击一张图片时，这张图片也会自动更改另一张图片。 这是放大前的图片:

这是我们点击图片的时候:

现在所有图像都已更改:

我正在使用这个代码。

 <div class="row" id="advertisement" style="margin-bottom: 10px;">

  </div>

模态代码

<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
        <center><img class="imgr img-responsive" src="" width="80%" height="200px" /></center>

</div>
</div>

这是 javascript 代码:-

  $(document).ready(function()
 {
 var url="http://api.dentallabworld.com/advertisement.php";
 $.getJSON(url,function(result){
 console.log(result);
 $.each(result, function(i, field){
 var advertisement=field.Image;
 var size=field.Size;
 $("#advertisement").append('<div class="col s'+size+'" style="padding:2.5px 
 5px 5px 5px; "><img id="'+(i+1)+'" class="imgr" width="100%" height="200px" 
 data-toggle="modal" data-target="#myModal" 
  src="{image path}/'+advertisement+'"></div>');

   });
   });
   });

Answer 1

试试这个 -

<div class="row" id="advertisement" style="margin-bottom: 10px;">

</div>
<div id="myModal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <center><img class="enlarged_image imgr img-responsive" src="" width="80%" height="200px" /></center>
    </div>
</div>

$(document).ready(function() {
    var url = "http://api.dentallabworld.com/advertisement.php";
    $.getJSON(url, function(result) {
        console.log(result);
        $.each(result, function(i, field) {
            var advertisement = field.Image;
            var size = field.Size;
            $("#advertisement").append('<div class="cols' + size + '" style="padding: 2.5px 5px 5px 5px;"><a href="#" class="pop"><img id="'+(i+1)+'" class="click_to_enlarge imgr" width="100%" height="200px" src="{image_path}/'+advertisement+'" onclick="showImg({image_path}/\''+advertisement+'\')"></a></div>');

        });
    });
});

var showImg = function(src) {
    $('.enlarged_image').attr('src', src);
    $('#myModal').modal('show');
}