Сышышь ты, выходи сюда,
поговорим !

Добавляем rel=»lightbox» для всех изображений в блоге

Опубликовано: 24.08.2018

видео Добавляем rel=»lightbox» для всех изображений в блоге

MVI 0118

Эффект lightbox, когда изображение открывается в модальном окне, затемняя содержимое окна, довольно популярен среди администраторов сайтов и блогов. Используя такой эффект, вы сможете концентрировать все внимание читателей на конкретном  изображении. Для активации подобного эффекта, очень  часто требуется в код прямой ссылки, которая  указывает на изображение, вставлять rel=»lightbox» или что-то в этом роде. Иногда используемый плагин или скрипт не делает этого автоматически и приходится искать и переписывать  коды ссылок на изображения вручную, что неудобно.


Другие атрибуты гиперссылок в HTML

Вариант 1

Для того, чтобы rel=» lightbox » в коды прямых ссылок вставлялись автоматически, откройте файл functions.php, и добавьте в него:

add_filter('the_content', 'addrellightbox'); function addrellightbox($content) { global $post; $pattern ="/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>/i"; $replacement = '<a$1href=$2$3.$4$5 rel="lightbox" title="'.$post->post_title.'"$6>'; $content = preg_replace($pattern, $replacement, $content); return $content; }

Данный код создает фильтр, пропускающий все ссылки, ведущие к файлам с расширениями bmp, gif, jpeg, jpg и png. Фильтр автоматом добавляет в ссылку rel=»lightbox».Изменить фильтр легко, если добавить в него другой тег, и такое изменение автоматически заработает в блоге.

Вариант 2

1. Скачиваем архив скрипта Lightbox 2, разархивируем и заливаем на ФТП в любую директорию.

2. Открываем код шаблона wordpress и в файл header.php добавляем:

<?php if (is_single()) { ?> <script type="text/javascript" src="http://wpincode.com/files/lightbox/js/prototype.js"></script> <script type="text/javascript" src="http://wpincode.com/files/lightbox/js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="http://wpincode.com/files/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="http://wpincode.com/files/lightbox/css/lightbox.css" type="text/css" media="screen" /> <?php } ?>

Обратите внимание, что я опять использую условие, которое задает вывод кода скрипта только на страницах постов + нужно будет заменить мой путь wpincode.com/files/lightbox на свой.

3. Теперь чтобы применить эффект для картинки для нее указывается специальный HTML параметр rel=»lightbox», например:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

Собственно, все сложность метода получается в этом rel=»lightbox», так как если для единичных картинок вы сможете его указать, то с галереей не все так просто.  К счастью, для этой можно использовать специальный плагин Add LightBox & Title . Процесс установки стандартный – скачали, разархивировали, залили на фтп в /wp-content/plugins/ и активировали.

Главная (и единственная) функция модуля – автоматическое добавление кода rel=»lightbox[POST-ID]» в ссылки картинок блога. Сразу после этого скрипт Lightbox 2 начнет работать корректно. Плагин позволяет работать в wordpress с разными скриптами эффектов изображений – как Lightbox 2, так другими, например, Shadowbox JS.

VN:F [1.9.22_1171]

Rating: 5.0/ 5 (2 votes cast)

rss