Сдейлай добро - напиши информацию о рос. войсках в телеграм @evorog_bot

GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

Задонатити ₴
Темний режим
GRAVITSAPA.info - интересный блог

Простой адаптивный Lightbox изображений для WordPress без плагинов

5258 просмотров Создание сайтов 1 коммент » 04 Лип 2018

Подключать будем библиотеку отсюда. Там же можно посмотреть demo. Называется Lightbox2 от разработчика Lokesh Dhakar. Достаточно простое решение, не перегруженное, изображения в лайтбоксе будут адаптироваться под любые размеры мониторов на любых мобильных устройствах.

Так же отмечу, что из всех js плагинов лайтбоксов, которые уже протестировал, у этого варианта, по моему мнению, достаточно высокое быстродействие. По сути на скорость загрузки страницы не влияет, а это является не маловажным фактором.

Итак, делаем всё по инструкции для подключения Lightbox изображений в Вашей теме WordPress:

  1. Скачиваем и распаковываем архив с файлами Лайтбокса.
  2. Ищем папку “src”, в ней есть три папки, которые нужно скопировать в корень папки Вашего шаблона WordPress.
  3. Затем в файле header.php между нужно подключить файлы Лайтбокса вот так:
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('template_url'); ?>/css/lightbox.css">
    <script src="<?php bloginfo('template_url'); ?>/js/lightbox.js"></script>
  4. После этого в файл functions.php нужно вставить этот код:
    <?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 data-lightbox="image"$1 title="'.$post->post_title.'"$6>';
    $content = preg_replace($pattern, $replacement, $content);
    return $content;
    }
    ?>
  5. Изображения в посты нужно вставлять как медиафайл:

Теперь у Вас есть красивый, простой, адаптивный Lightbox для изображений 😉 Пишите комменты, делитесь статьёй в соц. сетях.

Оставь свой коммент

1 коммент к посту “ Простой адаптивный Lightbox изображений для WordPress без плагинов”:

  1. Виталий

    Привет. У тебя паттерн кривой, и поэтому код не работает. Поправь пожалуйста.

Наверх