0

我有一个图像库,当您将鼠标悬停在每个图像上时会显示一些信息。当您单击每个图像时,将显示完整大小。我想根据您将鼠标悬停在它们上时出现的信息在全尺寸版本下添加一个标题。

为此,我制作了一系列标题文本。但是,我无法弄清楚如何将相关标题分配给相应的图像。我还想从标题中删除段落间距。

为了澄清,我添加了一些图像。

悬停时看到的文本。不是这里的问题。 在此处输入图像描述

缩放图像下的标题。我的问题: 在此处输入图像描述

这是我的代码:

// 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">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div class="caption">
    <p id="caption"></p>
  </div>
</div>
</div>

4

1 回答 1

1

您可以做的第一件事是选择 h3 和 h4 并修剪它们中的每一个以删除空格,例如:

console.log(current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim() );

// 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];
  var current_str = current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim();
  console.log(current_str);
  captionArr.push(current_str);
}

// 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;
    console.log('i',i);
    caption.innerHTML = captionArr[i];
  };
});

// 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, "");
    caption.innerHTML = captionArr[currentIndex];    
  }
}

prev.addEventListener("click", previousImage);

function previousImage() {
  if (currentIndex > 0) {
    currentIndex--;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];  
  }
}

// close the modal
var span = document.getElementsByClassName("close")[0];

span.addEventListener("click", close);

function close() {
  modal.style.display = "none";
}
.img-info h3,  .img-info h3,{
  color: #f1f1f1;
  opacity: 1 !important;
}

.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">&times;</span>
  <a class="prev">&#10094;</a>
  <a class="next">&#10095;</a>
  <!-- Modal Content -->
  <img id="modalImg" class="modal-content">
  <div class="caption">
    <p id="caption" align="center" id="caption" style="color:  white;"></p>
  </div>
</div>
</div>

请注意,我修改了 CSS,删除了很多您拥有的内容:

.img-info {
  display: block;
  /*opacity: 0;*/
  position: absolute;
  /*top: 50%;*/
  /*transform: translateY(-50%);*/
  /*left: 15px !important;*/
  max-width: 80%;
}

然后我们得到以下信息:

在此处输入图像描述

我相信这是理想的行为。

现在我想也可以在模型弹出窗口下添加。

为此,我们需要稍微修改 JS(我们需要先创建 captioArr 并将每个文本字符串推送到它上面。然后该数组的索引与您的 forEach 循环的索引匹配,因此我们可以使用caption.innerHTML = captionArr[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];
  var current_str = current.querySelector('h3').textContent.trim() + " " + current.querySelector('h4').textContent.trim();
  console.log(current_str);
  captionArr.push(current_str);
}

// 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;
    console.log('i',i);
    caption.innerHTML = captionArr[i];
  };
});

然后是p标签的样式(需要白色居中才能看到)

<div class="caption">
  <p id="caption" align="center" id="caption" style="color:  white;"></p>
</div>

然后我们得到:

在此处输入图像描述

最后,要在单击上一个和下一个按钮时更改标题,请在 prevImage 和 nextImage 函数中添加一行:

function nextImage() {
  if (currentIndex < imgArr.length - 1) {
    currentIndex++;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];    
  }
}

function previousImage() {
  if (currentIndex > 0) {
    currentIndex--;
    modalImg.src = imgArr[currentIndex].style.backgroundImage
      .slice(4, -1)
      .replace(/"/g, "");
    caption.innerHTML = captionArr[currentIndex];  
  }
}

即,caption.innerHTML = captionArr[currentIndex];

于 2020-03-11T17:15:21.223 回答