WordPress: Как открывать изображение в лайтбоксе по клику?

По умолчанию (сразу после установки чистой версии) в WordPress, в его редакторе блоков Gutenberg мы можем наблюдать давно желанную функцию увеличения изображения по клику без перенаправления, то есть оставаясь на той-же странице.

Добиться этого можно путём выделения нужного изображения и клика по ссылке. Учтите, что выбрав блок Медиа и Текст вы не обнаружите эту возможность (проверял на версии: 6.5.3), вам будет доступно только прикрепления оригинала изображения.

Медиа и Текст

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

После этого оригинал изображения будет открываться по клику на миниатюру.

Как открывать изображения в лайтбоксе (всплывающее окно)?

Этот трюк, вернее эта возможность доступна с одиночным медиафайлом. Вот я вставляю в контент страницы картинку-миниатюру и повторяю те же самые действия: вначале выделяю её, а потом кликаю на иконку закрепления за этим изображением ссылки

вставляю в контент страницы картинку-миниатюру

И вот тут-то мы можем наблюдать нужную нам функцию! Она называется Развернуть при нажатии

Выбрав её, наше изображение будет открываться во всплывающем окне, тем самым не перескакивая со страницы на отдельный URL, об этом свидетельствует «крестик» при помощи которого мы можем свернуть обратно наше изображение

крестик закрытия лайтбокса

Но как же быть, если нам необходимо чтобы текст обтекал изображение справа? Для этого мы можем воспользоваться другим блоком, который называется Колонки

блок Колонки

И уже с его помощью реализовать задуманное. Оба изображения из примера ниже будут открываться в лайтбоксе.

Как открывать фото из галереи в лайтбоксе?

Теперь рассмотрим ещё один пример на основе галереи. Вначале добавим блок Галереи на нашу страницу:

добавим блок Галереи

После этого загрузим (или выберем из библиотеки файлов) нужные нам изображения и выделив всю галерею справа в её настройках укажем в качестве ссылки Медиафайл.

Что получится? Да то же самое что и в самом первом случае — изображения будут открываться в новых URL . Чтобы задействовать наш лайтбокс нужно присвоить эту функцию каждому изображению в галереи:

делаем ссылку на лайтбокс

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

Автор

Evgeni

Веб-разработчик, фрилансер и фанат WordPress с 2012 года. На этом сайте делюсь заметками для начинающих по разработке на WordPress. Надеюсь увидеть вас в числе своих подписчиков.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *