Simple Lightbox

Salvatos 13 installations 7 likes

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

Gallery

Latest version 1

Released 3 years ago on 3rd Apr, 2022

Initial release.

CSS rules

/* 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 */

Install

User comments & reviews

No comments yet.