Добавление подписей к фотографиям

20 февраля 2023

Штатно вы можете добавить описание к фотографиям галереи и они будут всплывать при наведении мышкой. Этот же способ добавит СТАТИЧЕСКОЕ описание под каждой фотографией.

ВНИМАНИЕ! Работает только с галерей в виде квадратной сетки фотографий и с обычными фотографиями!

Ниже вы можете увидеть как это работает: к каждой фотографии из галерее добавляется подпись. При этом в ней можно использовать html, оформляя текст как вам надо.

Кстати, фотографии ниже — это сгенеренные нейросетью портреты в стиле Петера Линдберга

Длинное описание к фотографии, которое тоже возможно и может занимать несколько строк

Пример с обычной фотографией

Также скрипт добавляет подписи и к обычным фотографиям

И даже к фотографиям с текстовыми блоками

Как это сделано

Для начала вам нужно ко всем фотографиям на странице добавить альт-описания. Делается это в настройках страницы в закладке Alt-тексты.

После чего добавить на страницу HTML-блок в который вставить следующий код:

Добавление подписей к фотографии. Фотограф Константин Шамин

<script>
document.addEventListener("DOMContentLoaded",function(){$(".piece").css({"vertical-align":"top","text-align":"center","margin-bottom":"15px"});var t=0;$(".lazyunload").each(function(){$(this).attr("alt")!=$(document).attr("title")&&($(this).parents().eq(2).hasClass("inner")?$(".piece").eq(t-1).append("<span style='margin-top: 15px; display: inline; line-height: 1; font-size: 0.8em;'><br />"+$(this).attr("alt")+"</span>"):$(this).parents().eq(2).css({"text-align":"center"}).append("<span style='margin-top: 15px; display: inline; line-height: 1; font-size: 0.8em;'><br />"+$(this).attr("alt")+"</span>")),t++})});
</script>