Skip to content

Gallery: showing a caption

Marc-André Lafortune edited this page Feb 7, 2018 · 8 revisions

While there's no mechanism built in Featherlight gallery to display captions, it's easy to add.

For example, the following code looks for an <img> tag within the current target (typically a <a> tag), retrieves the value of the alt attribute and appends a <div> with that content.

$.featherlightGallery.prototype.afterContent = function() {
  var caption = this.$currentTarget.find('img').attr('alt');
  this.$instance.find('.caption').remove();
  $('<div class="caption">').text(caption).appendTo(this.$instance.find('.featherlight-content'));
};

Here's a basic example

Clone this wiki locally