Question

我环顾四周这些问题的答案，无法理解任何事情。非常感谢您能提供帮助：

我在网站上有一些照片。我希望模态能够工作，这样当单击图片时它会以更大的尺寸显示。

问题：代码仅适用于第一张图片。当我点击第二张图片时，没有任何反应。我已经环顾四周，看到一些答案指出，对于不同的图像具有相同的ID是问题，但我无法理解如何解决这个问题。

其他问题：我有幻灯片放映的JS代码和模态的JS代码。但是，如果模态的代码首先出现，幻灯片的代码不起作用，反之亦然

我复制了W3Schools的代码：

HTML HERE

                            <!-- Trigger the Modal -->
<img id="myImg" src="assets/img/work/amigurumi/cerdo/main.JPG" alt="Cerdito" width="360">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>
                <p>Cerdito 1</p>
            </div>





<div class="col-lg-4">
                            <!-- Trigger the Modal -->
<img id="myImg" src="assets/img/work/amigurumi/cerdo/P1140064.JPG" alt="Problema con imagen" width="360">

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- The Close Button -->
  <span class="close" onclick="document.getElementById('myModal').style.display='none'">&times;</span>

  <!-- Modal Content (The Image) -->
  <img class="modal-content" id="img01">

  <!-- Modal Caption (Image Text) -->
  <div id="caption"></div>
</div>
                <p>Cerdito 2</p>
            </div>

JS HERE - 注意我已经为模态和幻灯片放下了JS代码，因为我遇到了连接问题。 JS仅适用于首先出现的代码（如果幻灯片代码在模态代码之后，幻灯片放映不起作用......）

// IMAGE MODAL DAVID 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 = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.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];

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


//Slideshow DAVID

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("mySlides");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none"; 
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1} 
    x[slideIndex-1].style.display = "block"; 
    setTimeout(carousel, 2000); // Change image every 2 seconds
}

Answer 1

在你的模态问题的名称中，你必须喜欢这个解决方案，我想。我几天前在这里发了一个类似问题的答案。转到：

Add next and previous buttons when the I open the modal

祝你好运

多张图片的模态：

1 个答案: