我有一个图像库,当您将鼠标悬停在每个图像上时会显示一些信息。当您单击每个图像时,将显示完整大小。我想根据您将鼠标悬停在它们上时出现的信息在全尺寸版本下添加一个标题。
为此,我制作了一系列标题文本。但是,我无法弄清楚如何将相关标题分配给相应的图像。我还想从标题中删除段落间距。
为了澄清,我添加了一些图像。
这是我的代码:
// Modal Images
var modal = document.getElementById("modalContainer");
var modalImg = document.getElementById("modalImg");
var imgArr = document.querySelectorAll(".img-container .img");
var currentIndex;
imgArr.forEach(function(img, i) {
img.onclick = function() {
var backgroundImage = img.style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
modal.style.display = "block";
modalImg.src = backgroundImage;
currentIndex = i;
};
});
// caption
var captionArr = [];
var captionInfo = document.querySelectorAll(".img-info");
var caption = document.getElementById("caption");
for (var i = 0; i < captionInfo.length; i++) {
var current = captionInfo[i];
console.log(current.textContent);
}
caption.innerHTML = captionArr[i];
console.log(captionArr);
// previous and next buttons
var prev = document.querySelector(".prev");
var next = document.querySelector(".next");
next.addEventListener("click", nextImage);
modalImg.addEventListener("click", nextImage);
function nextImage() {
if (currentIndex < imgArr.length - 1) {
currentIndex++;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
}
}
prev.addEventListener("click", previousImage);
function previousImage() {
if (currentIndex > 0) {
currentIndex--;
modalImg.src = imgArr[currentIndex].style.backgroundImage
.slice(4, -1)
.replace(/"/g, "");
}
}
// close the modal
var span = document.getElementsByClassName("close")[0];
span.addEventListener("click", close);
function close() {
modal.style.display = "none";
}
.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;
}
.img {
display: block;
width: 200px;
height: 100%;
margin-right: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.img-info {
display: block;
opacity: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15px !important;
max-width: 80%;
}
.img-container:hover {
.img:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: rgba(0, 0, 0, 0.6);
}
.img-info {
opacity: 1;
}
}
.frame {
display: flex;
height: 100px;
min-height: 20rem;
}
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
box-sizing: border-box;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
justify-content: center;
align-items: center;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
max-height: 80%;
object-fit: contain;
-o-object-fit: contain;
animation-name: zoom;
animation-duration: 0.6s;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: auto;
padding: 0.8rem;
color: #777;
font-weight: normal;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
z-index: 3;
}
.prev:hover,
.next:hover {
color: #000;
}
.next {
right: 0;
}
.prev {
left: 0;
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
<div class="frame">
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1501159771943-cc9027db4d8b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80)">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 1...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 1...
</h4>
</div>
</div>
</div>
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1509042239860-f550ce710b93?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 2...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 2...
</h4>
</div>
</div>
</div>
<div class="img-container">
<div class="img" style="background-image: url(https://images.unsplash.com/photo-1583936410736-a4af4f3013d6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)">
</div>
<div class="img-info">
<div class="img-info-title">
<h3>
Some text 3...
</h3>
</div>
<div class="img-info-subtitle">
<h4>
The rest 3...
</h4>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="modalContainer" class="modal">
<!-- Buttons -->
<span class="close">×</span>
<a class="prev">❮</a>
<a class="next">❯</a>
<!-- Modal Content -->
<img id="modalImg" class="modal-content">
<div class="caption">
<p id="caption"></p>
</div>
</div>
</div>