«Легкий» лайтбокс без плагина: jQuery-плагин Highslide

Добрый день!

Те, кто профессионально занимается обработкой видео, знают, что применение различных эффектов (например, левитации фото) делает ролики более яркими, оригинальными и запоминающимися . Впрочем, это относится не только к видеосъемке, но и в равной степени к созданию сайтов — чем больше полезных эффектов вы внедрите на своем ресурсе, тем большую индивидуальность вы ему придадите. К чему это все? К тому, что сегодня мы поговорим об организации на сайте WordPress эффекта лайтбокса без плагинов.

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

Установка и настройка jQuery HighSlide

Прежде всего, нужно скачать архив с плагином. Внутри вы найдете папку с картинками-контролами и три файла: два js и один css.

Что со всем этим добром делать?

Файлы js и css закиньте по FTP в папку с вашей действующей темой оформления, а папочку highslide — внутрь папки Images шаблона. Полработы сделано 🙂

Осталось только подключить эти файлы к шаблону. Для этого в файле footer.php вашего сайта напишите код подключения скриптов, а в header подключите css-файл. Правильнее, конечно, это делать через functions.php, но тот, кто понимает, о чем речь, сделает это и сам. А вот новичкам проще будет именно так:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/highslide.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/highslide-init.js"></script>

Этот код в футер.

А вот эту строчку в хедер:

<link href="<?php echo get_template_directory_uri(); ?>/highslide.css" rel="stylesheet" type="text/css" />

И теперь все изображения, которым вы добавите класс highslide, будут открываться во всплывающем окне.

И это как бы все хорошо… Но вручную добавлять класс ко всем картинкам ну вот вообще не вариант. Поэтому мы используем маленькую хитрость.

Плагин Add Lightbox and Title

сделает за нас всю рутинную работу 🙂 После его установки и активации все картинки на вашем WordPress-сайте, которые сделаны ссылкой на медиафайл, будут красиво открываться в лайтбоксе.