jquery - 是否可以让 Pretty Photo Js 在打开单个图像时显示图像序列？

Question

我想制作我的作品集网页来展示我的平面设计作品。每件作品都会有一张封面图片和两个以上的元素图片来展示。

那么，这是一种自定义 PrettyPhoto Js 以在单击封面图像后在幻灯片中显示所有元素图像的方法吗？

我已附上图片以供引用。

提前致谢

Answer 1

您应该使用关系属性对它们进行分组。 查看下面的示例，我如何将前两项与 rel="prettyPhoto[1] 分组，然后将后三项与 rel="prettyPhoto[2]"

分组

<li class="col-sm-4"  data-filter=".photos">
<a rel="prettyPhoto[1]" href="...">
<img class="img-responsive" src="..." alt="" title=""/>
</a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[1]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[2]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[2]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>
<li class="col-sm-4"  data-filter=".photos">
  <a rel="prettyPhoto[2]" href="...">
  <img class="img-responsive" src="..." alt="" title=""/>
  </a>
</li>