模式图片以在同一页面中弹出另一张图片

Question

我正在尝试使另一张图像弹出另一张图像。但是，当我单击图像时，会弹出相同的图像 UPS。我在哪里将链接添加到其他图像？因此，我应该在哪里放置新图像的链接。不确定在哪里放置 来打开另一个图像。我是javascript新手，所以不确定在哪里放置图片。

$(".galeria img").click(function () {
  $("#btn-anterior").prop('disabled', false);
  $("#btn-siguiente").prop('disabled', false);
  imagen = $(this).attr("src");
  $(".modal-body").html("<img src=" + imagen + ">");
  if ($('.galeria').has("img[src$='" + imagen + "']").find('img:first').attr("src") == imagen) {
    $("#btn-anterior").prop('disabled', true);
  }
  if ($('.galeria').has("img[src$='" + imagen + "']").find('img:last').attr("src") == imagen) {
    $("#btn-siguiente").prop('disabled', true);
  }
  $('#myModal').modal('show');
});

$("#btn-siguiente").click(function () {
  imagen = $("img[src$='" + imagen + "']").next().attr("src");
  $(".modal-body").html("<img src=" + imagen + ">");
  if ($('.galeria').has("img[src$='" + imagen + "']").find('img:last').attr("src") == imagen) {
    $("#btn-siguiente").prop('disabled', true);
  }
  if ($('.galeria').has("img[src$='" + imagen + "']").has("img[src$='" + imagen + "']").find('img:first').attr("src") != imagen) {
    $("#btn-anterior").prop('disabled', false);
  }
});

$("#btn-anterior").click(function () {
  imagen = $("img[src$='" + imagen + "']").prev().attr("src");
  $(".modal-body").html("<img src=" + imagen + ">");
  if ($('.galeria').has("img[src$='" + imagen + "']").find('img:first').attr("src") == imagen) {
    $("#btn-anterior").prop('disabled', true);
  }
  if ($('.galeria').has("img[src$='" + imagen + "']").find('img:last').attr("src") != imagen) {
    $("#btn-siguiente").prop('disabled', false);
  }
});

$("#btn-download").click(function () {
  window.open(imagen);
});

.modal-dialog {
  text-align: center;
}
.modal-content {
  display: inline-block;
}
.galeria>img {
  width: 200px;
}
.galeria:hover {
  cursor: pointer;
}
#btn-download {
  float: left;
}
.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: .65;
}
.galeria>img,
.modal-body,
.modal-content,
.modal {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="galeria">
  <img src="http://placehold.it/800x300?text=A1">
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria- labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria- label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">

      </div>
      <div class="modal-footer">

      </div>
    </div>
  </div>
</div>