Question

我想在一个featherlight图库中显示一个或多个内容详细信息，因此用户可以在页面之间滑动或点击，然后关闭以返回到之前的任务。内容可能如下所示：

<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"));的同一呼叫似乎没有做任何事情。来自真正新用户的一些问题：

可以featherlightGallery()手动调用featherlight()吗？
如果是这样，将每个块分隔成自己的“幻灯片”的语法是什么？

Answer 1

好的，让它上班。在回答上述问题时：

是的，featherlightGallery()可以手动调用，例如featherlight()。尽管似乎确实存在差异......
看起来featherlightGallery()不喜欢<div>个内容元素，至少在当前版本（1.7.6）中（注意featherlight()的调用可以<div>但是，1}}元素。我可以通过将外部<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/

使用文字内容

1 个答案: