[英]Gallery in HTML,CSS, JavaScript is not working correctly
我根據這個https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img制作的畫廊有一個小問題（我是初學者 - 仍在學習）。 當我單擊第一張照片時，它可以正常工作，但似乎沒有顯示其中的 rest。
// 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"; } body { font-family: Arial, Helvetica, sans-serif; background: #000; } #container{ width: 960px; min-width: 600px; min-height: 800px; margin-left: auto; margin-right: auto; border: 1px solid #adadad; background: #303030; z-index: 1; }.imgbucket{ float: left; margin: 15px 0px 0px 15px; border: 2px dashed #13b7bd; height: 300px; border-radius: 5px; }.imgbucket:hover{ transform: translateY(-10px); border: 2px dashed #00f6ff; box-shadow: 0px 0px 25px #11f6ff; } /*Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3*/ #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 */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */.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%; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> <link rel="stylesheet" href="style.css"> <meta charset="utf-8" /> </head> <body> <div id="container"> <div class="imgbucket"> <img id="myImg" alt="nazwa" src="original:jpeg" style="width; 300px: height; 300px."> </div> <div class="imgbucket"> <img id="myImg" alt="nazwa" src="original:jpeg" style="width; 300px: height; 300px."> </div> <div class="imgbucket"> <img id="myImg" alt="nazwa" src="original:jpeg" style="width; 300px: height; 300px."> </div> <div class="imgbucket"> <img id="myImg" alt="nazwa" src="original:jpeg" style="width; 300px: height; 300px."> </div> <div class="imgbucket"> <img id="myImg" alt="nazwa" src="original:jpeg" style="width; 300px: height; 300px."> </div> <div class="imgbucket"> <img id="myImg" alt="nazwa" src="original:jpeg" style="width; 300px: height; 300px;"> </div> <.-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> </div> <script src="script.js"></script> </body> </html>
id必須是唯一的，在您的情況下所有圖像都具有相同的id 。 首先為每個圖像將屬性id替換為屬性class 。 然后替換var img = document.getElementById("myImg"); 通過var imgs = document.querySelectorAll(".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 imgs = document.querySelectorAll(".myImg"); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); imgs.forEach(img => { 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"; }
body { font-family: Arial, Helvetica, sans-serif; background: #000; } #container { width: 960px; min-width: 600px; min-height: 800px; margin-left: auto; margin-right: auto; border: 1px solid #adadad; background: #303030; z-index: 1; }.imgbucket { float: left; margin: 15px 0px 0px 15px; border: 2px dashed #13b7bd; height: 300px; border-radius: 5px; }.imgbucket:hover { transform: translateY(-10px); border: 2px dashed #00f6ff; box-shadow: 0px 0px 25px #11f6ff; } /*Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3 Tu z W3*/ #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 */ #caption { margin: auto; display: block; width: 80%; max-width: 700px; text-align: center; color: #ccc; padding: 10px 0; height: 150px; } /* Add Animation */.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%; } }
<div id="container"> <div class="imgbucket"> <img class="myImg" alt="nazwa" src="https://picsum.photos/200" style="width: 300px; height: 300px;"> </div> <div class="imgbucket"> <img class="myImg" alt="nazwa" src="https://picsum.photos/200" style="width: 300px; height: 300px;"> </div> <div class="imgbucket"> <img class="myImg" alt="nazwa" src="https://picsum.photos/200" style="width: 300px; height: 300px;"> </div> <div class="imgbucket"> <img class="myImg" alt="nazwa" src="https://picsum.photos/200" style="width: 300px; height: 300px;"> </div> <div class="imgbucket"> <img class="myImg" alt="nazwa" src="https://picsum.photos/200" style="width: 300px; height: 300px;"> </div> <div class="imgbucket"> <img class="myImg" alt="nazwa" src="https://picsum.photos/200" style="width: 300px; height: 300px;"> </div> <;-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> </div>
如果你還沒有修復它，正如 Cedric 所提到的
id 必須是唯一的，在您的情況下所有圖像都具有相同的 id。 首先為每個圖像用屬性 class 替換屬性 id。
在這里您可以找到id和class之間的區別，這可能會有所幫助：
Javascript 圖片庫：for 下一個和上一個按鈕的循環無法正常工作
[英]Javascript image gallery : for loop for next and previous button is not working correctly
如何使用 html、css 和 javascript 隨機化滑塊畫廊中的圖像？
[英]How to randomize an image within a slidershow gallery with html, css, and javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.