more than one caption with featherlight?

Question

i am using featherlight.js for image galleries and used this code for captions:

$.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'));
};

now a client wants to add a second caption which contains only copyright-information on the right side of gallery-images. is it possible to have two captions, one named .caption and the second maybe .copyright?

I already tried with "data-caption=" and a simple copy of the above js-initial but it failed.

any ideas? thank you in advance and merry christmas!

Answer 1

You could use a data attribute.

$.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'));

  var copyright = this.$currentTarget.find('img').data('copyright');
  this.$instance.find('.copyright').remove();
  $('<div class="copyright">').text(copyright).appendTo(this.$instance.find('.featherlight-content'));
};

Then in your markup add

<img src="..." alt="my caption text" data-copyright="my copyright text">

and in your css

.copyright {
  float: right;
}

or something to suit.

If you need it to be conditional you can check for the defined-ness and/or length of the data-copyright attribute.