Scribe Floating Images - Captions

Every now and again somebody asks for the impossible and those observing question the sanity of the proposer - so to provide some entertainment I am going to ask.

The caption functionality in Scribe Floating Images puts the caption underneath the image. Would it be possible to provide an option to overlay the caption on top of the image?

Just supposing the answer is ‘yes’ would it be possible for that caption to ‘stick’ to the image so it could be displayed in a LightBox?

The practical use of this is that my friends at a certain institution have requested I attach a copyright acknowledgement to a number of images on my site.

You can overlay the caption onto the image (and centre it) with the following CSS:

.scribe-image{
	position: relative
}

.scribe-image figcaption{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);

}

I’m not really sure how you want to Lightbox the image, that would most likely require something similar done with the caption in the lightbox.

If you are just proposing to have the scribe in a lightbox itself than the above code should still be fine, it should work the same regardless of where the scribe stack is.

Note that this CSS will affect all the scribe image captions on your page. It is possible to just apply the CSS selectively by using the custom class feature in the Scribe Image child stack but we can get to that if you need to.

1 Like

This is a copy of the post that I made to the second thread that you started relating to the lightbox just so that it is all in one place if people come looking in future:

Given that S4S 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

The demo project is not working for me (using Rapiweaver 8) - in that the caption does not display in the LiteBox. I don’t have Foundation but pulled in Nick Cates’ Strata theme.

Also the demo project assumes that my Scribe stack and Scribe Floating Image are inside the LiteBox stack - which they (preferably) would not be.

Just please say if you feel this is all getting too complex.

I like the way the caption text is white - great contrast with my images.

If it is not working then most likely there is something causing a JS error on the page.

It is not that complex at all so lets get it sorted. If you zip up a cut down version of the page with just the bit in question and your theme then email them to my support address then I will sort it for you.

I only put Scribe inside Litbebox because that is how it normally works but there is no reason why you can’t use it in its external trigger mode - the code does not depend on the position of the stack on the page; it simply uses the featherlight.js callback methods. These are direct from the plugin and have nothing to do with RW.

1 Like