在bootstrapp模型弹出窗口中显示多个图像

Question

我有一种逻辑，可以在模型弹出窗口中显示单个图像，但是现在，我试图在同一模型弹出窗口中显示多个图像。我该如何实现？ 这是我的单张图像工作代码。

$(document).on("click", "a[name='lnkViews']", function() {
  var myImageId = $(this).attr('id');

  $.ajax({
    url: "@Url.Action("
    ImagesView ", "
    Controller ")",
    type: "GET",
    data: {
      Id: myImageId
    },
    dataType: "json",
    success: function(data) {

      document.getElementById("ItemPreview").src = "data:image/jpg;base64," + data.data;

      $('#gardenImage').modal('show');

    },
    error: function() {
      alert("Error");
    }
  });
});

<!-- Modal -->
<div class="modal fade" id="gardenImage" tabindex="-1" role="dialog" aria-labelledby="gardenImageLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header" style="border-color:transparent !important">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body" style="border-color:transparent !important">

        <img class="center-block" id="ItemPreview" src="" alt="" />

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-danger center-block" data-dismiss="modal">close</button>
      </div>
    </div>
  </div>
</div>

非常感谢您的帮助。预先感谢！