Simple Lightbox en

Installations 13 Likes 4

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:

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):

Latest version 1 View content

Released 2 years ago

Initial release.

Plugin CSS for 1


/* BEGIN Salvatos Simple Lightbox */
.lightbox {
	display: none;
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 1em;
	background: rgba(0, 0, 0, 0.8);
}

/* Unhide the lightbox when targeted */
.lightbox:target {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	justify-content: center;
	align-content: center;
}
/* Show caption based on 'title' attribute */
.lightbox::after {
	content: attr(title);
	margin-top: 10px;
	align-self: center;
	color: lightgrey;
	font-style: italic;
	font-size: 16px;
}

/* Full image sizing */
.lightbox img {
	max-width: 100%;
	max-height: 100%;
}

/* Change cursor icon on hover */
a[href^="#lightbox-"]:hover {
    opacity: 0.9;
    cursor: zoom-in;
}
a[id^="lightbox-"]:hover {
    cursor: zoom-out;
}
/* END Salvatos Simple Lightbox */