jquery - 在 mixitup jquery 中为图像添加字幕

Question

我正在使用出色的 MixItUp jquery 来创建可过滤和可排序的画廊。我检查了一些示例，并修改了一个基本使用示例，以便它使用图像。但是，我无法使用任何形式的字幕。我已经尝试过，也尝试过我发现的几个 jquery 脚本，它们提取 ALT 文本并用它覆盖图像。

这是基本示例的一个分支，我刚刚在其中加载了一些图像:

http://codepen.io/anon/pen/dMwLJZ

容器只加载图像，并为过滤器和排序分配了 Class 和 Data 标签。

<div id="Container" class="container">
  <img class="mix category-1" data-myorder="1" src="http://placehold.it/350x150">
  <img class="mix category-1" data-myorder="2" src="http://placehold.it/350x150">
  <img class="mix category-2" data-myorder="3" src="http://placehold.it/350x150">
  <img class="mix category-2" data-myorder="4" src="http://placehold.it/350x150">

  <div class="gap"></div>
  <div class="gap"></div>
</div>

有人可以演示如何显示某种形式的字幕吗？理想情况下位于图像底部，但即使可以让文本显示在图像下方也可以，只要它当然可以与相应的图像一起排序。

谢谢

Answer 1

在图像周围添加环绕 div 将用作容器，可能的标题可以放在里面。
属性 data-myorder 和图像的类将被移动到新的包装父级。

参见此处:https://jsfiddle.net/6jc1ynbf/

HTML:

[...]
<div class="img-wrapper mix category-1" data-myorder="2">
  <img src="http://placehold.it/350x150">
  <span class="caption">I'm a caption</span>
</div>
[...]

CSS:

.container .img-wrapper {
  display: inline-block;
  position: relative;
}
.container .img-wrapper > img {
  max-width: 100%;
  max-height: 100%;
}
.container .img-wrapper > .caption {
  color: #eee;
  font-size: 15px;
  text-align: right;
  padding: 4% 6%;
  float: right;
}

这样你的伪元素就会产生效果(图像不能有伪效果，因为里面不能放置 HTML 内容)。

如果您想更灵活地定位字幕，请使用 position: absolute 并根据需要放置它们(包装器上的 position: relative 很重要)。

---

您可以像在伪元素上通过 content: attr() 那样为每个数据属性插入标题。
看到这个编辑过的 fiddle :https://jsfiddle.net/6jc1ynbf/1/