mojwp.ru
Назад

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

Опубликовано: 13.07.2014
20
893

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

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

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

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

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

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

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

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

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

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

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

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

  

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

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

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

 // lightbox задаем класс изображениям
add_filter('the_content', 'addrellightbox');
function addrellightbox($content) {
       global $post;
	$pattern = "/(.*?)title=('|\")(.*?)('|\")(.*?)<\/a>/i";
    $replacement = '$7title=$8$9$10$11';
    $content = preg_replace($pattern, $replacement, $content);
    $content = str_replace("%LIGHTID%", $post->ID, $content);
    return $content;
}

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

Правим CSS

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

a.lightbox {position: static;}

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

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

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

Автор:
Виталий
Поделиться
Похожие записи
Черкани пару строк
  • Андрей
    Опубликовано: 13.07.2014 Ответить на сообщение

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

  • Volond
    Опубликовано: 13.07.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 13.07.2014 Ответить на сообщение

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

  • Polina
    Опубликовано: 13.07.2014 Ответить на сообщение

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

  • Вадим
    Опубликовано: 14.07.2014 Ответить на сообщение

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

  • Степан
    Опубликовано: 20.07.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 21.07.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 24.07.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 24.07.2014 Ответить на сообщение

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

      • Юлия Штрелер
        Опубликовано: 29.07.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 14.08.2014 Ответить на сообщение

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

    • Виталий
      Опубликовано: 15.08.2014 Ответить на сообщение

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

    • Юлия Штрелер
      Опубликовано: 15.08.2014 Ответить на сообщение

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

      • Юлия Штрелер
        Опубликовано: 16.08.2014 Ответить на сообщение

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

  • Андрей
    Опубликовано: 06.10.2014 Ответить на сообщение

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

  • Евгений
    Опубликовано: 03.03.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 06.03.2015 Ответить на сообщение

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

  • Руслан
    Опубликовано: 14.04.2015 Ответить на сообщение

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

    • Виталий
      Опубликовано: 15.04.2015 Ответить на сообщение

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

  • Андрей
    Опубликовано: 22.08.2015 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.