具有多個圖像的模態圖像庫

Question

我正在嘗試在我擁有的畫廊上獲得這個（ https://www.w3schools.com/howto/howto_css_modal_images.asp ）。 我已經成功地讓它工作了，但它只適用於一張圖片，並且不能復制到畫廊，因為它只適用於一張圖片。

我發現這個人在 3 年前發布了同樣的問題（ 模態圖像庫 - 多個圖像）所以我一直在嘗試遵循該修復但一直無法。

我一直在關注 CSS 和鏈接中的 JS 提示

 // 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 <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"; }

 /* 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%; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <.-- Trigger the Modal --> <img id="SD" class="myImg" src="SD.jpg" alt="SD B"> <.-- 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="modal-image"> <!-- Modal Caption (Image Text) --> <div id="caption"></div> </div>

Answer 1

這是完整的工作代碼： https://jsfiddle.net/dmvshn/75ueLgbt/

添加新圖像使用標簽img與 class="myImg"：

< img class="myImg" src="link to picture" alt="some note" width="300" height="200" >