Если ваши записи/страницы сайта с темой Divi содержат изображения со ссылкой на это изображение, то при клике на эти ссылки чаще всего они будут открываться на отдельной вкладке в окне браузера. Это позволяет посетителям детальнее просматривать медиафайлы. Однако на самом деле для посетителя это не так удобно, если бы открывалось такое изображение в лайтбоксе.

Лайтбокс (lightbox) — это по cути отдельная страница с контентом и элементами управления, всплывающая поверх существующей и занимающая почти всю площадь отображения

В данной статье рассмотрю как на сайте с темой Divi или с плагином Divi Builder сделать так чтобы в постах и страницах открывать изображение в лайтбоксе независимо в каком редакторе создан пост: редактор Divi Builder или редактор Гутенберг.

к оглавлению ↑

В чем же проблема открыть изображение в лайтбоксе

Следует отметить, что в Divi Builder уже есть собственный скрипт, который открывает изображение в лайтбоксе. Например, если в настройках Divi активен параметр «Активировать Галерею Divi» — то Divi Builder использует собственный скрипт Lightbox. Когда пользователь щелкает изображение из галереи — то изображение открывается в модальном окне.

При размещенни отдельного изображения с помошью модуля «Изображение» Divi Builder в настройках модуля можно указать выводить ли это изображение в лайтбокс.

Как открыть изображение в лайтбоксе
Опция открыть изображение в лайтбоксе в настройках модуля Divi Builder
Проблема в том, что этот скрипт недоступен для отдельных изображений, особенно если они размещены в постах или страницах, созданных с помошью редактора Гутенберг.

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

Как открыть изображение в лайтбоксе

В этом случае при просмотре поста после клика на это изображение вы, скорее всего, перейдете в новую вкладку браузера и это изображение откроется в новой вкладке, что не всегда удобно:

Как открыть изображение в лайтбоксе

Есть ряд способов решить такую проблему для сайта с Divi Builder и открывать ссылки на изображения в лайтбоксе.

к оглавлению ↑

Способ 1. Добавить на сайт плагин Divi Lightbox for Images.

Плагин Divi Lightbox for Images использует для открытия отдельных изображений в лайтбоксе родной код Divi. Единственным требованием для работы плагина является наличие установленной и активной темы Divi или конструктора Divi Builder и, конечно же, активная опция Divi Gallery в меню Divi Options.

Как открыть изображение в лайтбоксе
Опция активации галереи в теме Divi

Плагин помогает избежать установки другого скрипта для достижения эффекта Lightbox так как он использует код Divi Builder. Сайт получает лучшую производительность уменьшая тем самым потребность в установке дополнительных плагинов и скриптов.

Для отдельных изображений плагин Divi Lightbox for Images загружает код в нижний колонтитул для лучшей оптимизации и производительности.

Обратите внимание: плагин работает только с установленным и активным плагином Divi Builder или темой Divi
к оглавлению ↑

Способ 2. Добавить на сайт код

Если вы хотите, чтобы на сайте с Divi Builder при клике на ссылку изображения это изображение открывалось в лайтбоксе без использования плагина, ниже код jQuery для этого:

<script data-name="dbc_links_in_lightbox">
jQuery(function($) {
		var $links = $('.entry-content a, .et_pb_post_content a').filter(db_is_image_link).not(db_is_gallery_image_link);
		$links.filter(db_has_child_img).addClass('et_pb_lightbox_image'); 
		$links.not(db_has_child_img).magnificPopup({type:'image'});
		
		function db_has_child_img() {
			return ($(this).children('img').length);
		}
		
		function db_is_image_link() {
			return (/.(?:jpg|jpeg|gif|png|bmp)$/i.test($(this).attr('href')));
		}
		
		function db_is_gallery_image_link() {
			return ($(this).parent().hasClass("et_pb_gallery_image")); 
		}
	}
);
</script>

Код можете добавить в раздел настроек Divi «Интеграция» в окно «Добавить код в <head> вашего блога». Да, не забудьте подключить код шапки сайта.

Как открыть изображение в лайтбоксе

Начиная с версии Divi 4.10, библиотека Magnific Popup, используемая для отображения лайтбоксов, больше не загружается по умолчанию и должна загружаться явно по мере необходимости. Вы можете сделать это, добавив этот код PHP на свой сайт:

add_action('wp_enqueue_scripts', 'dbc_lightbox_images_register_magnific_popup', 11); // Enqueue later than 10 to avoid triggering child theme enqueued stylesheet detection in et_divi_enqueue_stylesheet()

function dbc_lightbox_images_register_magnific_popup() {
    if (!defined('ET_BUILDER_URI') || !defined('ET_CORE_VERSION') || version_compare(ET_CORE_VERSION, '4.10', '<')) { return; }
    wp_enqueue_style('dbc-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/css/magnific_popup.css', array(), ET_CORE_VERSION);
    wp_enqueue_script('dbc-magnific-popup', ET_BUILDER_URI.'/feature/dynamic-assets/assets/js/magnific-popup.js', array( 'jquery' ), ET_CORE_VERSION, true);
}

Код можно добавить в файл functions.php дочерной темы.

к оглавлению ↑

Совместимость с WP Rocket

Если вы используете плагин кеширования WP Rocket и в плагине используете функцию «Отложить выполнение JavaScript» — то добавление следующих исключений для кеширования должно обеспечить правильную работу кода :

/feature/dynamic-assets/assets/css/magnific_popup.css
/feature/dynamic-assets/assets/js/magnific-popup.js

Пишите комментарии, делитесь статей в соцсетях, оставляйте свои замечания и предложения.

Удачи.
Александр Коваль

Рубрики: Плагины Divi

Про автора:

Александр Коваль

Александр Коваль

Предприниматель. IT-специалист. Создаю интернет-магазины, лендинги и другие сайты. Помогаю поддерживать их работу. Расширяю функционал и возможности сайтов на WordPress. Пишите если нужна помощь с сайтом или разработка "с нуля"

Share via
Send this to a friend