模态图像库 – 多个图像

我目前正在尝试根据以下代码制作图像库： http ： //www.w3schools.com/howto/howto_css_modal_images.asp

此代码适用于单个图像，但是当您尝试添加更多图像时它不起作用。 我相信这与使用ID的javascript有关，但是当我尝试使用类代替ID时代码将无效。

有没有人有幸使用W3学校的这个例子创建一个工作图库？

谢谢！ 🙂

这是我的代码正文中的HTML和JavaScript。

 
Gallery
    
  ×    
 
    
  ×    
 
 
  // 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.getElementsByClassName('myImg'); var modalImg = document.getElementById("modal-image"); var captionText = document.getElementById("caption"); img.onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; captionText.innerHTML = this.alt; } // Get the  element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on  (x), close the modal span.onclick = function() { modal.style.display = "none"; }  

Answer 1

试试这个。 它使用了一点jquery，但你不必更改你的html。 除了将id="myImg"改为class="myImg"

 // 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 = $("#img01"); var captionText = document.getElementById("caption"); $('.myImg').click(function(){ modal.style.display = "block"; var newSrc = this.src; modalImg.attr('src', newSrc); captionText.innerHTML = this.alt; }); // Get the  element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on  (x), close the modal span.onclick = function() { modal.style.display = "none"; } 

  /* Style the Image Used to Trigger the Modal */ .myImg { border-radius: 5px; cursor: pointer; transition: 0.3s; } .myImg:hover {opacity: 0.7;} /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ } /* Modal Content (Image) */ .modal-content { margin: auto; display: block; width: 80%; max-width: 700px; } /* Caption of Modal Image (Image Text) - Same Width as the Image */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation - Zoom in the Modal */ .modal-content, #caption { -webkit-animation-name: zoom; -webkit-animation-duration: 0.6s; animation-name: zoom; animation-duration: 0.6s; } @-webkit-keyframes zoom { from {-webkit-transform:scale(0)} to {-webkit-transform:scale(1)} } @keyframes zoom { from {transform:scale(0)} to {transform:scale(1)} } /* The Close Button */ .close { position: absolute; top: 15px; right: 35px; color: #f1f1f1; font-size: 40px; font-weight: bold; transition: 0.3s; } .close:hover, .close:focus { color: #bbb; text-decoration: none; cursor: pointer; } /* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ .modal-content { width: 100%; } } 

      
  ×    
  

Answer 2

仅使用一个Image-Modal块，并将该模态块用于不同的图像，所有图像必须具有相同的className（在此示例中为“myImg”），并添加以下javascript。 我希望这是有帮助的。

 var modal = document.getElementById("myModal"); var i; var img = document.getElementsByClassName("myImg"); var modalImg = document.getElementById("img01"); for(i=0;i< img.length;i++) { img[i].onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; } } var span = document.getElementsByClassName("close")[0]; span.onclick = function() { modal.style.display = "none"; }