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

Question

我想在 featherlight gallery 中显示 1 个或多个内容详细信息，以便用户可以在页面之间滑动或单击，然后关闭以返回到他们之前的任务。内容可能看起来像这样:

<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")); 调用工作，但它将所有文本放在同一个灯箱中-- 我希望每个内容项都在单独的“幻灯片”中。不幸的是，对 $.featherlightGallery($("div.ach")); 的相同调用似乎没有执行任何操作。一个真正的新用户的一些问题:

• 是否可以像featherlight()那样手动调用featherlightGallery()？
• 如果是这样，将这些 block 中的每一个分成它们自己的“幻灯片”的语法是什么？

Answer 1

好的，开始工作了。回答上述问题:

• 是的，featherlightGallery()可以手动调用，比如featherlight() .似乎确实有区别，但是...
• 它看起来不像featherlightGallery()喜欢<div> content 元素，至少在当前版本 (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/