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

Question

我想在轻量画廊中显示 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/