Модальные галереи изображений - несколько изображений не будут отображаться

Question

// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = $('.myImg');
var modalImg = $("#modalImage");
var captionText = document.getElementById("caption");
img.on("click",function () {
  modal.style.display = "block";
  var newSrc = this.src;
  modalImg.attr = ('src', newSrc);
  captionText.innerHTML = this.alt;
});

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function () {
  modal.style.display = "none";
}

Итак, я читал этот пост о том, как сделать несколько изображений с модальным эффектом. Оригинальный пост здесь. Модальные галереи изображений - несколько изображений . Я использовал http://www.w3schools.com/howto/howto_css_modal_images.asp и их метод, а затем изменил код для работы с галереей изображений типа сетки.

Я могу показать подписи к фотографиям, но не могу показать изображение. Какие-нибудь мысли? Код javascript использует немного JQuery.

Answer 1

Похоже, проблема в установке sr c, в частности метода .attr () из Jquery. Это функция, которую нужно выполнить, а не установить значение.

// Get the image and insert it inside the modal - use its "alt" text as a caption
    var img = $('.myImg');
    var modalImg = $("#modalImage");
    var captionText = document.getElementById("caption");
    img.on("click",function () {
      modal.style.display = "block";
      var newSrc = this.src;
      modalImg.attr = ('src', newSrc);
      captionText.innerHTML = this.alt;
    });

изменить:

modalImg.attr = ('src', newSrc);

на

modalImg.attr('src', newSrc);