LiteBox and Captions

I have been very happily using BWD Scribe stacks on my site, together with LiteBox. Any floating image can be clicked and obviously gets ‘LiteBoxed’.

I have been asked to put a copyright statement on some images and @tav has kindly given me some CSS code so that the caption (ie copyright message) now appears on top of the image, suitably positioned.

Now is there a way to engineer that when the image is clicked by a site visitor the caption sticks with the image and appears in the LiteBox?

Given that LiteBox uses the super flexible featherlight lightbox, we can automatically copy the fig caption element to the lightbox and change a class name when it is opened. This means that the CSS that I gave you for the in-page caption will now work in the lightbox.

Just add this to you page or site-wide JS code.

$(function(){
 $.featherlight.prototype.afterContent = function() {
 	var ftcontent = this.$instance.find('.featherlight-content') ;
 	ftcontent.addClass('scribe-image');	
    var capt = this.$currentTarget.next().html();
    $('<figcaption class="scribe-caption">').text(capt).appendTo(ftcontent);
  };
});

Here is a little demo project with it working

2 Likes