Simple Lightbox

Simple Lightbox en

Installations 12 Likes 3

Make images expandable on click with some additional markup to create a "lightbox" view with optional caption text. Based on this example by Gregory Schier.

Instructions

I recommend using my Lightbox Creator user script to convert your image tags into lightboxes with a single click.

Otherwise, you will need to manually wrap your image in an anchor pointing to a unique ID, then create a duplicate where the anchor has the corresponding ID and points to "#_", like so:

a6b1a200-b4b9-403a-8473-24efc5915778.png

This example also has a caption added in the title attribute, which is optional.

Customization

You can customize the caption’s styling by copying the following to your campaign CSS and changing the values as desired:

.lightbox::after {
	margin-top: 10px;
	align-self: center;
	color: lightgrey;
	font-style: italic;
	font-size: 16px;
}

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed): Support me on Ko-fi.com

Latest version 1

Released 1 year ago

Initial release.