GRAVITSAPA.INFO

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

GRAVITSAPA.info - интересный блог

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

62 просмотров Создание сайтов Нет комментов » 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 для изображений 😉 Пишите комменты, делитесь статьёй в соц. сетях.

Почитайте ещё эти интересные статьи:

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

Наверх