Лайтбокс

Требует jQuery. Автоматически подхватывает ссылки на картинки. Можно покрутить настройки под себя.

Че делает

На все ссылки с картинками делает лайтбокс и перехватывает их открытие, показывая в лайтбоксе, собственно.

По дефолту достаточно добавить этот скрипт, а после него, где требуется, инициировать его так: lightbox()

Вот такие стили у меня для него. Влом переписывать с моих плагинов PostCSS на чето понятное, но надеюсь разберётесь:

@custom-media --md (max-width: 852px);

.hc-lbx {
	--lightbox-outer-bg: var(--c-lightbox-bg);
	--caption-color: var(--c-main-2);
	--icons-color: var(--c-main-1);
	--background-under-img: var(--c-main-1);
	--image-border-radius: var(--border-radius-light);
	--image-shadow: var(--shadow-1);
	--caption-margin-top: var(--grid-sides);

	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	min-width: 100vw;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4vh 3vw;
	background: var(--lightbox-outer-bg);
	z-index: 30;
	cursor: zoom-out;
	pointer-events: all;
	@media (--md) {
		padding: calc(var(--grid-gutter) * 2 + 1.8rem + var(--grid-sides))
			var(--grid-sides) var(--grid-sides) var(--grid-sides);
		&:after {
			content: '';
			width: 100%;
			display: block;
			z-index: 2;
			position: fixed;
			height: calc(var(--grid-gutter) * 2 + 1.8rem);
			background: var(--c-brand);
			top: 0;
			left: 0;
			box-shadow: var(--shadow-2);
		}
	}
	.caption {
		color: var(--caption-color);
		margin-bottom: 0;
		margin-top: var(--caption-margin-top);
		font-weight: 400;
		text-align: center;
		line-height: 1.3;
		width: 100%;
		@media (--md) {
			margin-top: 0;
			margin-bottom: 0;
		}
	}
	picture {
		width: auto;
		height: auto;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border-radius: var(--image-border-radius);
		box-shadow: var(--image-shadow);
		z-index: 2;
		background: var(--background-under-img);
		cursor: auto;
		> * {
			margin: 0;
			padding: 0;
			size: 100%;
			object-fit: contain;
		}
	}
	&__button {
		size: 5rem;
		position: fixed;
		top: 50%;
		margin-top: -2.5rem;
		cursor: pointer;
		z-index: 3;
		opacity: 0.4;
		transition: opacity var(--transition-out);
		display: flex;
		align-items: center;
		justify-content: center;
		span {
			font-size: 5rem;
			color: var(--icons-color);
		}
		@media (--md) {
			top: 0;
			color: var(--c-second-1);
			opacity: 1;
			margin-top: 0;
			size: var(--header-height);
		}
		&.prev {
			left: 0;
			span {
				transform: rotate(90deg);
			}
			@media (--md) {
				left: calc(var(--grid-sides) - 0.2em);
			}
		}
		&.next {
			right: 0;
			span {
				transform: rotate(-90deg);
			}
			@media (--md) {
				right: calc(var(--grid-sides) - 0.2em);
			}
		}
		&.prev span,
		&.next span {
			@media (--md) {
				font-size: 2.8rem;
			}
		}
		&:hover {
			opacity: 1;
			transition: opacity var(--transition-in);
		}
		&.zoom,
		&.close {
			display: none;
			span {
				font-size: 2rem;
			}
			@media (--md) {
				display: flex;
			}
		}
		&.zoom {
			transform: translateX(calc(var(--header-height) * -0.5));
			span {
				transform: scale(0.8);
			}
		}
		&.close {
			transform: translateX(calc(var(--header-height) * 0.5));
		}
		&.disabled {
			pointer-events: none;
			opacity: 0;
		}
	}
	&.zoom {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
		padding-top: calc(var(--grid-gutter) * 2 + 1.8rem);
		.caption {
			display: none;
		}
		picture {
			width: 100%;
			height: 100%;
			overflow: scroll !important;
			border-radius: 0;
			position: static;
			justify-content: flex-start;
			align-items: stretch;
			> * {
				object-fit: none;
				width: 100%;
				min-width: fit-content;
				min-height: fit-content;
				height: auto;
				position: relative;
				margin: calc(var(--grid-gutter) * 2);
				box-shadow: var(--shadow-1);
			}
		}
		.i-zoom {
			color: var(--c-main-1);
			transition: color var(-on-hover-in-transition);
		}
	}
	&-link {
		cursor: zoom-in;
		img,
		img& {
			outline: 2px solid #0000;
			box-shadow: var(--shadow-none);
			outline-offset: -2px;
			border-radius: var(--border-radius-light);
			transition: var(--transition-out);
			transition-property: all;
		}
		&:hover {
			img,
			img& {
				outline: 2px solid var(--shadow-2-color);
				box-shadow: var(--shadow-1);
				transition: var(--transition-in);
				transition-property: all;
			}
		}
		&:after {
			display: none;
		}
	}
}
body.modal {
	pointer-events: none;
	overflow: hidden;
}

Листает картинки на странице, подхватывает описания. Есть зум (для мобил актуально).

Ещё есть вот оно на кодпене.

Настройки

lightbox({
	selectors: ['body'],
	specialSelector: '[img-lightbox]',
	extensions: ['png', 'jpg', 'gif', 'webp'],
	lightboxContainer: 'body',
	captionSelector: 'alt-lightbox',
	closeOnOuter: true,
	guttenberg: false,
	blank: false,
	icons: {
		zoom: '+',
		prev: '<',
		next: '>',
		close: 'x',
	},
});

selectors — если указать, например, ['main', '.adv-footer'], то будет работать только в этих областях.
Принимает string, array
specialSelector — если нужно добавить дополнительный селектор. Например, если туда вписать button и кнопкам добавить атрибут, например img-lightbox="img.jpg", то кнопка станет открывать лайтбокс, если есть ссылка по img-lightbox.
Принимает: string
extensions — сюда вписываем разрешения файлов, которые должен открывать лайтбокс. Например, у меня так: 'png', 'jpg', 'gif', 'jpeg', 'webp', 'svg'.
Принимает: array
lightboxContainer — выбор контейнера, куда будут захерачены созданные лайтбоксы. По дефолту будет херачить в конце body.
Принимает: string
captionSelector — атрибут, который будет служить контентом для описания картинки, открытой в лайтбоксе. Ну, тупо если хочешь добавлять описания типа <img img.jpg vasya-title="Моя свадебная фотография">, то сделай там captionSelector: "vasya-title".
Принимает: string
closeOnOuter — если поставить false, то лайтбокс не будет закрываться при клике вне фотки или кнопок.
Принимает: boolean
guttenberg — оптимизация под редактор guttenberg в wordpress. Если не знаешь че это, то не парься, ибо по умолчанию не используется. Если нужен, то ставим значение true.
Если поставить значение «gallery», то, если нет описания у конкретной картинки в гелерее, возьмёт за описание описание всех картинок в этой галерее.
Принимает: boolean, string
blank — по умолчанию не будет обрабатывать ссылки на картинки, которые открываются в новой вкладке. Если true, то будет блочить открытые в новой вкладке и откроет в лайтбоксе.
Принимает: boolean
icons — по дефолту вот че сверху в коде. Если поставить icons: false, то ваще никаких кнопок не будет. А если icons: {close: false}, например, то иконки закрытия не будет.
Тут можно добавить любой объект, который будет иконкой, например:
icons:{zoom: '<img crs='my-icon.png'>'}
Принимает: boolean, array[var: boolean], array[var: string]

Потестим тут

Обычная картинка внутри <a> тега

Такая же, но с описанием

Ссылка на картинку

Ссылка и ссылка в новой вкладке (если и они должны открываться в лайтбоксе, то blank: true поставь).

Не картинка, а ваще будет, например пункт списка, к которому я решил припилить лайтбокс

Пункт списка 1
Пункт списка с лайтбоксом
Пункт списка 3

Картинка не обрамлённая тегом <a>

Есть атрибут alt-lightbox, как с пунктом списка выше

WordPress (Gutenberg) галерея

Логика такая, что будет выводиться в лайтбоксе подпись галереи, но если у какой-то картинки есть отдельно своя подпись, то будет показываться она

Работы
> Статья

Настройки

Настройки

Че делает

Настройки