Делаем всплывающее изображение скриптом Lightbox

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

Ставить будем на примере сайта под WordPress, но сам скрипт позволяет себя установить на любую CMS.

Пример можете глянуть на странице Как сделать виджет сайта в браузере Яндекс, кликнув по изображению в статье.

Ранее я рассматривал плагины FancyBox for WordPress и WP-lightpop, которые работают на основе рассматриваемого в статье скрипта. Однако плагины обладают зачастую лишним функционалом, который не нужен большинству из нас. А это лишняя нагрузка сайта.

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

Не думайте, что поставить данный скрипт большая проблема. На самом деле вы будете дольше читать данную статью, чем подключать Lightbox к сайту.

Устанавливаем скрипт Lightbox на сайт

Запомните!!! Делайте резервные копии файлов, с которыми работаете. Я не несу ответственности за ваши действия.

Качаем последнюю версию скрипта на официальном сайте http://www.lokeshdhakar.com/projects/lightbox2/.

Далее необходимо подключить его к шаблону. Все инструкции на английском присутствуют на странице со скриптом. Но, если вы не очень понимаете англ, то я поясню "на пальцах" что и куда прописывать для WordPress.

Для начала, скачанный архив распаковываем и получаем папку lightbox. Ее необходимо закачать в вашу папку с шаблоном. Делаем это по ftp-соединению. Сделали...

Теперь открываем файл header.php шаблона и до закрывающего тега </head> вам необходимо поместить такие строки:

<script src="<?php bloginfo('template_directory'); ?>/lightbox/js/jquery-1.11.0.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/lightbox/js/lightbox.min.js"></script>
<link href="<?php bloginfo('template_directory'); ?>/lightbox/css/lightbox.css" rel="stylesheet" />

Здесь мы указали, что файлы скрипта лежат в папке с шаблоном по такому-то пути.

Хочу обратить ваше внимание, что первой строкой мы подключали jQuery к сайту. Если у вас ранее данная библиотека была подключена, то повторно делать этого не нужно. Максимум что может произойти - это перестанет работать какой-то функционал на сайте, т.к. пойдет конфликт из-за версий jQuery. Паниковать не нужно: просто удалите эту строку из кода выше.

На этом с подключением скрипта все. Остается задать всем вашим изображениям на сайте необходимый класс, чтобы скрипт знал, что по клику на них он начинает работу. Для WordPress это делается вставкой кода в файл функций шаблона functions.php. Открываем его и в самом начале сразу после знака <?php и с новой строки вставляем:

 // lightbox задаем класс изображениям
add_filter('the_content', 'addrellightbox');
function addrellightbox($content) {
       global $post;
	$pattern = "/<a(.*?)href=('|\")(.*?).(bmp|gif|jpeg|jpg|png)('|\")(.*?)>(.*?)title=('|\")(.*?)('|\")(.*?)<\/a>/i";
    $replacement = '<a$1href=$2$3.$4$5 title=$8$9$10 rel="lightbox[%LIGHTID%]"$6>$7title=$8$9$10$11</a>';
    $content = preg_replace($pattern, $replacement, $content);
    $content = str_replace("%LIGHTID%", $post->ID, $content);
    return $content;
}

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

Правим CSS

После подключения данного скрипта к сайту у вас могут в статьях "поползти" изображения, т.е. на них будет наползать текст. Это решается вставкой одной строки в файл style.css шаблона:

a.lightbox {position: static;}

Теперь все будет ОК.

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

Поздравляю с установкой скрипта!

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 20 комментариев
  1. Андрей (129 комм.) says:
    http://zarobitok.ru/

    Отличный хак Виталий и долой плагин fancybox-for - для изображений, ща буду побывать. Благодарю.

  2. Volond (1 комм.) says:
    http://zarabatyvat.com/

    Давно хотел сделать на своем блоге всплывающие изображения. Увидел вашу статью, обрадовался и решил добавить скрипт на сайт. Но вскоре передумал. Мне кажется с плагином намного легче будет. Не пойму почему вы пытаетесь заменить все плагины на скрипты и хаки...

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Я сторонник минимализма)
      В статье есть ссылки на плагины, которые делают аналогичное.
      Каждый выбирает сам для себя. При верстке проекта с индивидуальным дизайном и функционалом иногда проще поставить подобный скрипт и настроить, чем ставить плагин, который при обновлении клиентом может потерять часть запланированных и модифицированных свойств.

  3. Polina (2 комм.) says:
    http://polinkinweb.ru

    Ой а я давно хотела такую фишку. Теперь бы суметь это соорудить моими криворучками 🙂 Спасибо, буду пытаться, потом похвалюсь!

  4. Вадим (13 комм.) says:
    http://av-finance.ru/

    Спасибо за информацию. Все просто, понятно и доступно. Уверен, справится даже ребенок. 🙂
    А я избавился еще от одного плагина. Надеюсь это скажется положительно на скорости загрузки сайта.

  5. Степан (1 комм.) says:

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

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Нужно видеть код.

  6. Андрей (11 комм.) says:
    http://fruittree.ru

    Добрый. Виталий, а можно ли и как заменить под изображением наименование статьи на alt самого изображения?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Можно. Для этого вам необходимо будет покопаться в коде самого скрипта.

      • Юлия Штрелер (14 комм.) says:
        http://www.net4lady.ru/

        Здорово, благодарю! У меня все получилось. Я так поняла, что под изображениями выводится текст из заголовка статьи (h1)
        Пыталась найти эту функцию в коде скрипта - не нашла((((
        Если у кто-нибудь сможет изменить эту деталь на описание самого изображения - поделитесь хаком, плиз)))

  7. Андрей (5 комм.) says:
    http://oldpak.ru/

    С одиночными картинками все отлично, а как подключить скрипт к стандартной галерее WordPress?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

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

    • Юлия Штрелер (14 комм.) says:
      http://www.net4lady.ru/

      Кстати, да, я тоже присоединяюсь к вопросу.)))

      • Юлия Штрелер (14 комм.) says:
        http://www.net4lady.ru/

        Сегодня нашла для себя решение вопроса. Поставила плагин Gallery Carousel Without JetPack - выполняет одну из функций знаменитого Джек Пака)))
        Теперь в галереях изображений можно подписывать фото как хочешь, плюс к ним есть выпадающая форма комментариев.
        Понятно, что это плагин все-таки, но блог сильно не грузит.Посмотрела в коде страниц- скрипты плагина грузятся в последнюю очередь, уже после основного содержимого. Думаю, сойдёт пока)))

  8. Андрей (1 комм.) says:
    http://www.planetoday.com/

    Отлично, на один плагин меньше. Спасибо за урок!!! Все работает, сделал за 2 минуты.

  9. Евгений (1 комм.) says:
    http://more-experience.net/

    Спасибо Виталий! Ваш пост помог избавится еще от одного плагина, скрипт работает! Вот еще бы отключить один плагин dagondesign и вообще бы блог летал бы!

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Ну так создайте шаблон карты сайта HTML.
      В сети полно готовых решений. Вам останется только стили поправить под свой сайт.

  10. Руслан (1 комм.) says:

    Виталий добрый день. Подскажите пожалуйста, как сделать, чтобы скрипт добавлял класс lightbox только изображениям в папке uploads? т.е только на картинки в статье влиял. У меня проблема выявилась, при активации сползли все картинки в плагине Related Posts by Zemanta.
    Подскажете?

    • Виталий (1675 комм.) says:
      http://mojWP.ru/

      Отпишите мне на почту. На досуге гляну.

  11. Андрей (129 комм.) says:
    http://zarobitok.ru/

    Виталий, а как подключить новую версию lightbox2? если можно загрузите для скачивания скрипт который рассматривается в статье в интернете нет 🙁

Не держи в себе. Выскажись.

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

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 14.17MB | MySQL:83 | 0,503sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html