在 mixitup 中为图像添加字幕 jquery

Question

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

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

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

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

<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 和类将移动到新的包装 parents.

看这里：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/

在 mixitup 中为图像添加字幕 jquery

Adding captions to images within mixitup jquery

html

css

jquery

mixitup