手动打开带有文本内容的 Featherlight Gallery

Question

我想在 featherlight 图库中显示 1 个或多个内容详细信息，以便用户可以在页面之间滑动或单击，然后接近 return 到他们之前的任务。内容可能如下所示：

<div id="ContentDetails">
<div class="ach">
  <h3>Title 1</h3>
  <p>Content Item 1</p>
</div>
<div class="ach">
  <h3>Title 2</h3>
  <p>Content Item 2</p>
</div>
<div class="ach">
  <h3>Title 3</h3>
  <p>Content Item 3</p>
</div>
</div>

JSFiddle：https://jsfiddle.net/6n0a55qn/46/

我可以让单个 $.featherlight($("div.ach")); 调用工作，但它将所有文本放在同一个灯箱中 -- 我希望每个内容项都放在separate "slide." 不幸的是，对 $.featherlightGallery($("div.ach")); 的相同调用似乎没有做任何事情。一个真正的新用户的一些问题：

可以像featherlight()那样手动调用featherlightGallery()吗？
如果是这样，将这些块中的每一个分成自己的块的语法是什么"slide"？

Answer 1

好的，开始工作了。回答以上问题：

是的，featherlightGallery()可以像featherlight()一样手动调用。似乎确实有区别，但是...
看起来 featherlightGallery() 不喜欢 <div> 内容元素，至少在当前版本 (1.7.6) 中是这样（注意对 featherlight() 的调用是可以的<div> 个元素）。我能够通过将外部 <div> 元素更改为 <a> 人来创建画廊，如下所示：

<a class="slides" href=".slide-1">
  <div class="slide-1">
    <h3>Title 1</h3>
    <p>Content Item 1</p>
  </div>
</a>
<a class="slides" href=".slide-2">
  <div class="slide-2">
    <h3>Title 2</h3>
    <p>Content Item 2</p>
  </div>
</a>
<a class="slides" href=".slide-3">
  <div class="slide-3">
    <h3>Title 3</h3>
    <p>Content Item 3</p>
  </div>
</a>

手动调用图库：

$.featherlightGallery($(".slides"));

jsfiddle: https://jsfiddle.net/6n0a55qn/66/

手动打开带有文本内容的 Featherlight Gallery

Manually open Featherlight Gallery with text content

javascript

jquery

featherlight.js