Если ваши записи/страницы сайта с темой Divi содержат изображения со ссылкой на это изображение, то при клике на эти ссылки чаще всего они будут открываться на отдельной вкладке в окне браузера. Это позволяет посетителям детальнее просматривать медиафайлы. Однако на самом деле для посетителя это не так удобно, если бы открывалось такое изображение в лайтбоксе.
В данной статье рассмотрю как на сайте с темой Divi или с плагином Divi Builder сделать так чтобы в постах и страницах открывать изображение в лайтбоксе независимо в каком редакторе создан пост: редактор Divi Builder или редактор Гутенберг.
к оглавлению ↑В чем же проблема открыть изображение в лайтбоксе
Следует отметить, что в Divi Builder уже есть собственный скрипт, который открывает изображение в лайтбоксе. Например, если в настройках Divi активен параметр «Активировать Галерею Divi» — то Divi Builder использует собственный скрипт Lightbox. Когда пользователь щелкает изображение из галереи — то изображение открывается в модальном окне.
При размещенни отдельного изображения с помошью модуля «Изображение» Divi Builder в настройках модуля можно указать выводить ли это изображение в лайтбокс.
Например, в редакторе Гутенберг в посте вы разместите изображение и укажете для него ссылку на сам файл изображения:
В этом случае при просмотре поста после клика на это изображение вы, скорее всего, перейдете в новую вкладку браузера и это изображение откроется в новой вкладке, что не всегда удобно:
Есть ряд способов решить такую проблему для сайта с Divi Builder и открывать ссылки на изображения в лайтбоксе.
к оглавлению ↑Способ 1. Добавить на сайт плагин Divi Lightbox for Images.
Плагин Divi Lightbox for Images использует для открытия отдельных изображений в лайтбоксе родной код Divi. Единственным требованием для работы плагина является наличие установленной и активной темы Divi или конструктора Divi Builder и, конечно же, активная опция Divi Gallery в меню Divi Options.
Плагин помогает избежать установки другого скрипта для достижения эффекта Lightbox так как он использует код Divi Builder. Сайт получает лучшую производительность уменьшая тем самым потребность в установке дополнительных плагинов и скриптов.
Для отдельных изображений плагин Divi Lightbox for Images загружает код в нижний колонтитул для лучшей оптимизации и производительности.
Способ 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
Пишите комментарии, делитесь статей в соцсетях, оставляйте свои замечания и предложения.
Удачи.
Александр Коваль
