javascript - 在模态图片下方添加一个DIV框用于描述

Question

我正在为基于 Web 的应用程序使用网格图库。图库没有图像的描述框，我不知道如何手动添加一个。

如果我尝试在 <div class="content"></div> 中添加一个 div它包含我的图像，单击时图像无法以全 View 加载。我尝试了多种方法，甚至浏览了网络上的一些技巧和教程，但似乎没有任何效果。即使内容类中的 div 加载，它也会占用整个屏幕的宽度(超过图像的宽度)。

所有图片都有单独的宽度和高度，所以我也无法固定宽度。这是我想要实现的目标示例以及我在 Codepen 片段中的当前代码。

这是示例:https://prnt.sc/plhqcr

代码笔片段:https://codepen.io/zoomkraft/pen/KKKNVXN

这个描述框是我想要的图像全 View (单击全 View 时的单个图像)而不是画廊 View 。任何帮助将不胜感激。

Answer 1

现在我认为这是我第 10 次看到这个 codePan Snippet 和添加描述框的问题。所以我想出了以下分步解决方案:

HTML 的变化

将类为 .desc 的 Div 作为子类添加到类为 od .gallery-item 的每个 Div。新的 Div .desc 包含描述。

<div class="gallery-item">
  <div class="content">
    <img src="https://source.unsplash.com/random/?tech,care" alt="">
    <div class="desc">This is my Image Description</div>
  </div>
</div>

CSS 的变化

在类“.full .content”(.full .content img {)中设置img显示类型为block。同时将 mas-height 设置为 80%。

.full .content img {
  left: 50%;
  display:block;
  transform: translate3d(0, 0, 0);
  animation: zoomin 1s ease;
  max-width: 100%;
  max-height: 80%;
  margin: auto;
}

现在添加 .content .desc 和 .full .content 的类。描述

.content .desc {
  display:none;
  height:20%;
}
.full .content .desc {
  display:block;
  height:20%;
  margin-right:auto;
  margin-left:auto;
  background:#fff;
}

JS 的变化

先写代码...

var gallery = document.querySelector("#gallery");
var getVal = function(elem, style) {
  return parseInt(window.getComputedStyle(elem).getPropertyValue(style));
};
var getHeight = function(item) {
  return item.querySelector(".content").getBoundingClientRect().height;
};
var resizeAll = function() {
  var altura = getVal(gallery, "grid-auto-rows");
  var gap = getVal(gallery, "grid-row-gap");
  gallery.querySelectorAll(".gallery-item").forEach(function(item) {
    var el = item;
    el.style.gridRowEnd =
      "span " + Math.ceil((getHeight(item) + gap) / (altura + gap));
  });

  gallery.querySelectorAll(".full").forEach(function(item) {
var imgwidth = item.getElementsByTagName('img')[0].clientWidth;
    var desc = item.getElementsByClassName('desc')[0];
    desc.style.width=imgwidth+"px";
 });
};
gallery.querySelectorAll("img").forEach(function(item) {
  item.classList.add("byebye");
  if (item.complete) {
    console.log(item.src);
  } else {
    item.addEventListener("load", function() {
      var altura = getVal(gallery, "grid-auto-rows");
      var gap = getVal(gallery, "grid-row-gap");
      var gitem = item.parentElement.parentElement;
      gitem.style.gridRowEnd =
        "span " + Math.ceil((getHeight(gitem) + gap) / (altura + gap));
      item.classList.remove("byebye");
    });
  }
});
window.addEventListener("resize", resizeAll);
gallery.querySelectorAll(".gallery-item").forEach(function(item) {
  item.addEventListener("click", function(event) {
if ((item.classList.contains("full") && ['IMG', 'A'].includes(event.target.tagName)) || (item.classList.contains("full") && ['desc'].includes(event.target.className))) {
      return;
    }
    item.classList.toggle("full");
    var imgwidth = item.getElementsByTagName('img')[0].clientWidth;
    var desc = item.getElementsByClassName('desc')[0];
    desc.style.width=imgwidth+"px";
  });
});

如果屏幕按图像宽度调整大小，我们向 resizeAll 函数添加了一个小片段来调整 .desc 类的大小。 在 .gallery-item click 函数中，我们添加了一个小代码来调整切换后的 div 大小。

这就是全部，对我来说工作正常并满足您的要求。

在这里您可以找到更新的代码笔:https://codepen.io/MatWer/pen/XWWNGoK (只有第一个元素有 desc .class)