CODEWITHSUNDEEP
javascriptjqueryfeatherlight.js
eb1
eb1

Reputation: 2947

Manually open Featherlight Gallery with text content

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:

Upvotes: 2

Views: 991

Answers (1)

eb1
eb1

Reputation: 2947

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/

Upvotes: 2

Related Questions