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()插入每个数据属性的标题看到这个编辑过的小提琴：https://jsfiddle.net/6jc1ynbf/1/

在mixitup jquery中为图像添加标题

1 个答案: