0

我正在使用出色的 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>

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

谢谢

4

1 回答 1

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()在伪元素上所做的那样，为每个数据属性插入标题。
看到这个编辑过的小提琴：https ://jsfiddle.net/6jc1ynbf/1/

于 2016-05-06T14:41:04.930 回答