javascript - 具有多个图像的模态图像库
问题描述
我试图在我拥有的画廊上获得这个( 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'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modal-image">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
解决方案
Here is the fully working code: https://jsfiddle.net/dmvshn/75ueLgbt/
to add new image use tag img
with class="myImg":
< img class="myImg" src="link to picture" alt="some note" width="300" height="200" >
推荐阅读
- fpga - vivado:未使用的顺序元素已删除
- javascript - 切换按钮的背景颜色不起作用
- php - 我应该在哪里添加我的 add_action(init 以便我可以使用 wp_set_object_terms?
- kivy - minimum_height 在 .py 内的布局中不起作用(仅在 .kv 中起作用)?
- node.js - 安装 zsh 和 yvm 后终端完全崩溃并卡住(无法输入,Ctrl C 不起作用)
- javascript - 如何独立于特定的相机轴移动相机?
- java - 如何在不创建新对象的情况下测试私有成员对象
- vue.js - 如何在 Vue.js 中动态延迟加载 SCSS 文件?
- amazon-ses - Nodemailer SES TRANSPORT 错误:“UnexpectedParameter:在参数中找到意外的键 'Destination'”
- vue.js - Vue.js 在构建生产时配置根目录