javascript - 使用 JavaScript 为我的网站提供多个图像模式
问题描述
我正在尝试为我的网站创建多个图像模式,但我似乎无法调整代码以使其工作。任何帮助或建议将不胜感激,因为我仍在学习,这一直困扰着我一段时间:)
HTML:
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
脚本:
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img");
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";
}
解决方案
您似乎想将灯箱效果添加到图库页面。有多个用于灯箱的库,例如这个非常容易实现的库。
至于你的代码,你仍然可以让它工作(这里的 css 非常重要):
.gallery-item .caption {
font-size: 8px;
display: none;
}
.gallery {
padding: 0px;
margin: 0 auto;
text-align: center;
}
.gallery-item {
display: inline-block;
padding: 10px;
border: 1px solid salmon;
border-radius: 10px;
background-color: whitesmoke;
text-align: center;
margin: 5px;
max-width: 200px;
box-sizing: border-box;
/* height: 220px; */
vertical-align: middle;
width: 200px;
}
.gallery-item img {
max-width: 165px;
}
#lightbox {
position: fixed;
text-align: center;
top: 0;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
color: white;
font-size: 12px;
display: inline-block;
}
#lightbox img {
height: 85vh;
vertical-align: middle;
vertical-align: middle;
clear: both;
}
#lightbox a {
color: white;
}
#lightbox-close {
float: right;
padding: 5px;
}
#lightbox-prev, #lightbox-next {
float: left;
padding: 5px;
}
#lightbox-contents {
display: inline-block;
}
.hidden {
display: none !important;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Lightbox gallery</title>
</head>
<body>
<div id="pic list">
<ul class="gallery">
<li class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Doge_homemade_meme.jpg">
<p class="caption">Caption1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
</li>
<li class="gallery-item">
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/5f/Original_Doge_meme.jpg/300px-Original_Doge_meme.jpg">
<p class="caption">Caption2: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
</li>
</ul>
<!-- The Modal -->
<div id="lightbox" class="hidden">
<div id="lightbox-contents">
<!-- The Close Button -->
<div>
<a href="#" id="lightbox-close">Close</a>
<a href="#" id="lightbox-prev">Previous</a>
<a href="#" id="lightbox-next">Next</a>
</div>
<!-- Modal Content (The Image) -->
<div class="lightbox-img">
<img src="https://upload.wikimedia.org/wikipedia/commons/d/df/Doge_homemade_meme.jpg">
<!-- Modal Caption (Image Text) -->
<p class="caption">Caption1: Lorem, ipsum dolor sit amet consectetur adipisicing elit. Sapiente, ducimus.</p>
</div>
</div>
</div>
<script>
//Lightbox
const close = document.getElementById('lightbox-close')
const lightbox = document.getElementById('lightbox')
const galleryItems = document.getElementsByClassName('gallery-item')
const lightboxImg = document.querySelector('.lightbox-img')
close.onclick = function (event) {
event.preventDefault();
lightbox.classList.add('hidden');
}
for (i=0; i<galleryItems.length; i++) {
let items = galleryItems[i]
items.onclick = function (event) {
lightboxImg.innerHTML = items.innerHTML;
lightbox.classList.remove('hidden');
}
}
</script>
推荐阅读
- python - Python Altair 绘制两个偏差标准
- android - 后台提醒通知 - Android
- java - 用一个单独的 java 类中的另一个片段替换一个片段
- ruby-on-rails - 按下提交按钮时Rails UJS未提交表单
- ios - iOS Deeplink 在启动应用程序时不起作用
- python - 创建收敛的整数列表
- r - 在 R 中安装“RcppCNPy”的问题
- cryptocurrency - 为什么我的币安钱包中的 BNB 数量会在我不买或卖的情况下发生变化?
- linux - 来自 /proc/ 的基址和限制地址
/ - angular - DOMException:无法在“WorkerGlobalScope”上执行“importScripts”:“http://localhost:4200/BlinkCardWasmSDK.js”处的脚本无法加载