HTML、CSS、JavaScript 中的图库无法正常工作
[英]Gallery in HTML,CSS, JavaScript is not working correctly
问题描述
I hava small problem with gallery which I made(I'm beginner - still learning) according to this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img .
我根据这个https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal_img制作的画廊有一个小问题（我是初学者 - 仍在学习）。 When I click the first photo it works correctly, but rest of them doesn't seems to show up.当我单击第一张照片时，它可以正常工作，但似乎没有显示其中的 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>
2 个解决方案
解决方案1
0 已采纳 2020-10-24 20:06:27
id must be unique, in your case all images have the same id . id必须是唯一的，在您的情况下所有图像都具有相同的id 。 Frist for each images replace attribute id by attribute class .首先为每个图像将属性id替换为属性class 。 Then replace var img = document.getElementById("myImg");然后替换var img = document.getElementById("myImg"); by var imgs = document.querySelectorAll(".myImg");通过var imgs = document.querySelectorAll(".myImg"); and loop over each image.并遍历每个图像。
// 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>
解决方案2
0 2020-10-25 03:04:23
if you didn't fix it yet, as mentioned by Cedric如果你还没有修复它，正如 Cedric 所提到的
id must be unique, in your case all images have the same id.
here you can find the diference between id and class that might help:在这里您可以找到id和class之间的区别，这可能会有所帮助：
https://css-tricks.com/the-difference-between-id-and-class/ https://css-tricks.com/the-difference-between-id-and-class/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Javascript 图片库：for 下一个和上一个按钮的循环无法正常工作 - Javascript image gallery : for loop for next and previous button is not working correctly
CSS / HTML图库 - CSS/HTML Gallery
带有 HTML 和 CSS 的屏幕截图库？ - Screenshot gallery with HTML and CSS?
CSS HTML div向左移动无法正常工作 - css html div moving to left not working correctly
如何使用 html、css 和 javascript 随机化滑块画廊中的图像？ - How to randomize an image within a slidershow gallery with html, css, and javascript?
CSS JavaScript灯箱图库 - CSS JavaScript LightBox Gallery
如何使Javascript中的CSS正常工作 - How to get CSS in Javascript working correctly
嵌入HTML的Javascript和CSS无法正常工作 - Javascript and CSS Embed into HTML Not Working
标签在HTML CSS Javascript中不起作用 - Tabs are not working in HTML CSS Javascript
悬停不适用于Javascript，CSS和HTML - Hovering not working with Javascript, CSS and HTML
相关标签