Как создать блочную модальную функцию, где изображение sr c отличается от изображения в модале?

Question

Я хочу, чтобы мой модальный блок отображал одно изображение на странице, а затем отображал другое изображение в модальном режиме, которое появляется при нажатии. Это то, что у меня есть до сих пор

<div class="row">
<div class="modal-image"><img id="myImg" src="https://cdn.shopify.com/s/files/1/2559/4942/files/Oregon_BC.jpg?133063981068178530"alt="Oregon Base Camp Rack" ></div>
<div class="modal-image"><img id="myImg-2"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/John_Damon_b13b257e-7888-4e2c-8c15-0a6dfa19bf42.jpg?133063981068178530" alt="John Damon Home Gym"></div>
<div class="modal-image"><img id="myImg-3"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/TennesseeBasecamp_47f9a83d-9842-4839-bfe5-fff94eb431ac.jpg?133063981068178530"alt="Tennessee Base Camp Rack" ></div>
<div class="modal-image"><img id="myImg-4"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/Northwestern_BC.jpg?133063981068178530"alt="Northwestern Base Camp Rack" ></div>
<div class="modal-image"><img id="myImg-5"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/Vikings_cbf17994-7edf-4be3-8096-8f037ec5ae90.jpg?133063981068178530"alt="Minnesota Vikings Base Camp Rack" ></div>
   </div>

<!-- The Modal -->
<div id="myModal" class="modalA">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
<script>
// Get the modal
var modalA = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
$('#myImg, #myImg-2, #myImg-3, #myImg-4, #myImg-5, #myImg-6').click(function () {
  modalA.style.display = "block";
  modalImg.src = this.src;
  captionText.innerHTML = this.alt;
})




// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
  if(event.target == modalA) {
    modalA.style.display = "none";
  }
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
   modalA.style.display = "none";
}
</script>

Я пытался добавить это

var firstImg = document.getElementById("myImg");


var imgSwitchFunction = function() {

    firstImg.src = "newimg";
}

firstImg.onclick = imgSwitchFunction;

, но это не изменило модальное изображение, просто отображаемое изображение при нажатии. Любая помощь будет принята с благодарностью.

Answer 1

Вам придется заменить newimgurl1-5 в тегах изображений URL-адресами изображений, которые вы хотите отобразить в модальном, а не немодальном изображении. Вместо того, чтобы выбирать тег sr c для модального изображения для копирования, этот код выбирает атрибут данных, который содержит URL-адрес по вашему вкусу.

// Get the modal
var modalA = document.getElementById('myModal');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
$('#myImg, #myImg-2, #myImg-3, #myImg-4, #myImg-5, #myImg-6').click(function () {
  modalA.style.display = "block";
  modalImg.src = $(this).data('newimg-src');
  captionText.innerHTML = this.alt;
})




// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
  if(event.target == modalA) {
    modalA.style.display = "none";
  }
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
   modalA.style.display = "none";
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<div class="modal-image"><img id="myImg" src="https://cdn.shopify.com/s/files/1/2559/4942/files/Oregon_BC.jpg?133063981068178530"alt="Oregon Base Camp Rack" data-newimg-src="newimgurl1" ></div>
<div class="modal-image"><img id="myImg-2"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/John_Damon_b13b257e-7888-4e2c-8c15-0a6dfa19bf42.jpg?133063981068178530" alt="John Damon Home Gym"  data-newimg-src="newimgurl2"></div>
<div class="modal-image"><img id="myImg-3"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/TennesseeBasecamp_47f9a83d-9842-4839-bfe5-fff94eb431ac.jpg?133063981068178530"alt="Tennessee Base Camp Rack"  data-newimg-src="newimgurl3"></div>
<div class="modal-image"><img id="myImg-4"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/Northwestern_BC.jpg?133063981068178530"alt="Northwestern Base Camp Rack"  data-newimg-src="newimgurl4"></div>
<div class="modal-image"><img id="myImg-5"  src="https://cdn.shopify.com/s/files/1/2559/4942/files/Vikings_cbf17994-7edf-4be3-8096-8f037ec5ae90.jpg?133063981068178530"alt="Minnesota Vikings Base Camp Rack"  data-newimg-src="newimgurl5"></div>
   </div>

<!-- The Modal -->
<div id="myModal" class="modalA">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>