2

I'd like to display 1 or more content details in a featherlight gallery, so users can swipe or click from page to page, and then close to return to their previous tasks. The content might look something like this:

<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/

I can get the single $.featherlight($("div.ach")); call to work, but it places all the text in the same lightbox -- I'd like each content item in a separate "slide." Unfortunately, the same call to $.featherlightGallery($("div.ach")); doesn't appear to do anything. Some questions from a really new user:

  • Can featherlightGallery() be called manually like featherlight()?
  • If so, what's the syntax that would separate each of those blocks into their own "slide"?
eb1
  • 2,897
  • 3
  • 31
  • 42

1 Answers1

2

Okay, got it to work. In answer to the questions above:

  • Yes, featherlightGallery() can be called manually, like featherlight(). There does appear to be a distinction, though...
  • It doesn't look like featherlightGallery() likes <div> content elements, at least in the current version (1.7.6) (note that the call to featherlight() is okay with <div> elements, though). I was able to create a gallery by changing the outer <div> elements to <a> guys instead, as follows:

<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>

To manually call the gallery:

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

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

eb1
  • 2,897
  • 3
  • 31
  • 42