14.12.2022
Как связать стандартную WordPress-галерею со всеми любимой JS-библиотекой Fancybox? Как установить и настроить Fancybox без плагинов? На все эти вопросы я отвечу в нашем свежем материале!
Что такое Fancybox, и зачем он вообще нужен?
Эта JS-библиотека будет полезна вам, если вы публикуете на своем сайте большое количество фотографий. Далеко не всем пользователям захочется разглядывать миниатюры ваших изображений. Особенно, если ширина контентной части вашего сайта довольно узкая.
Данную проблему способна решить JS-библиотека Fancybox. Пользователи будут кликать на изображения, и они будут открываться на весь экран. С помощью этой библиотеки вы сможете также создавать полноценные слайдеры, что точно повысит юзабилити вашего сайта.
Fancybox — маст хев, который необходимо использовать на современных сайтах.
Как установить Fancybox на сайт под CMS WordPress?
JS-библиотеку можно загрузить как с официального сайта разработчика, так и в конце этого материала. Все файлы, загруженные на наш сайт, проходят тщательную проверку на вирусы, поэтому вы можете быть уверены в их безопасности.
При открытии архива, загруженного с нашего сайта, вы найдете .js и .css файлы, которые необходимо подключить к вашему сайту.
Обычно мы подключаем скрипты и стили через functions.php следующим образом:
function custom_scripts_fancy() {
wp_enqueue_style( 'fdd-fancybox-css', get_template_directory_uri() . '/assets/fancybox/fancybox.min.css', false, '0.68' );
wp_enqueue_script( 'fdd-fancybox-js', get_template_directory_uri() . '/assets/fancybox/fancybox.min.js', array('jquery'), _S_VERSION, true );
}
add_action( 'wp_enqueue_scripts', 'custom_scripts_fancy' );
Но если вы только новичок в этом деле, то вам подойдет и более простое решение:
- Скачиваем архив и загружаем CSS и JS файлы на сервер вашего сайта. Вы можете создать папку assets внутри вашей темы;
- В файле header.php вашей темы подключаем CSS;
- В файле footer.php вашей темы подключаем JS.
Отлично, вы справились с установкой JS-библиотеки. Теперь можете перейти в режим разработчика на вашем сайте и открыть консоль. Если ошибок нет, то все сделано верно.
Если же консоль выдает ошибки, то, вероятнее всего, вы указали неправильный путь к CSS и JS от Fancybox, забыли загрузить файлы на сервер или же у вас отсутствует JQuery… У вас остались вопросы, которые вы не можете решить самостоятельно? Обратитесь ко мне за помощью в комментариях или вступите в нашу группу в вконтакте и задайте свой вопрос там. Бесплатно помогу с решением любой возникшей проблемой!
Как использовать Fancybox в работе?
Для того, чтобы фотографии на вашем сайте открывались в модальном окне, требуется обернуть изображения в ссылку, задать ей href, совпадающий с url-адресом фотографии, и не забыть добавить атрибут data-fancybox со значением gallery. Выглядеть это должно как-то так:
<a href="путь-к-вашему-изображению.jpg" data-fancybox="gallery"><img src="путь-к-вашему-изображению.jpg"></a>
Значение в кавычках у data-fancybox может быть любым. НО! Если вы хотите, чтобы фотографии не просто открывались в модальном окне, но и пролистывались (был реализован функционал слайдера со стрелочками), то это значение должно быть одинаковым. Приведу примеры.
Вы хотите, чтобы у вас на странице было 4 изображения, при клике на которые у вас был бы функционал слайдера:
<a href="путь-к-вашему-изображению-1.jpg" data-fancybox="gallery"><img src="путь-к-вашему-изображению-1.jpg"></a>
<a href="путь-к-вашему-изображению-2.jpg" data-fancybox="gallery"><img src="путь-к-вашему-изображению-2.jpg"></a>
<a href="путь-к-вашему-изображению-3.jpg" data-fancybox="gallery"><img src="путь-к-вашему-изображению-3.jpg"></a>
<a href="путь-к-вашему-изображению-4.jpg" data-fancybox="gallery"><img src="путь-к-вашему-изображению-4.jpg"></a>
Вы хотите, чтобы у вас на странице было 4 изображения, но в модальном окне открывалось только 1 изображение без функционала слайдера:
<a href="путь-к-вашему-изображению-1.jpg" data-fancybox="gallery1"><img src="путь-к-вашему-изображению-1.jpg"></a>
<a href="путь-к-вашему-изображению-2.jpg" data-fancybox="gallery2"><img src="путь-к-вашему-изображению-2.jpg"></a>
<a href="путь-к-вашему-изображению-3.jpg" data-fancybox="gallery3"><img src="путь-к-вашему-изображению-3.jpg"></a>
<a href="путь-к-вашему-изображению-4.jpg" data-fancybox="gallery4"><img src="путь-к-вашему-изображению-4.jpg"></a>
Бонус: как настроить Fancybox для стандартной галереи WordPress?
Допустим, вы создаете сайт компании, которая предоставляет какие-либо услуги. И на этом сайте есть раздел с выполненными проектами. Вы выводите изображения через стандартный функционал WordPress — с помощью галерей изображений. Как подтянуть Fancybox к этому функционалу? Сейчас расскажу!
Вам необходимо перейти к редактированию записи на вашем сайте и проверить, чтобы в настройках стандартной галереи стояла ссылка на медиафайл.
После этого заходим на страницу этой записи и открываем консоль разработчика. В коде находим вывод галереи и замечаем, что все изображения обернуты тегом figure с классом wp-block-gallery.
Это значит, что мы можем без особых усилий написать простой jquery-скрипт, который будет находить firuge с классом wp-block-gallery и добавлять тегу ссылки атрибут data-fancybox. Вставьте следующий код в footer вашей темы или же в отдельный файл с вашими скриптами:
<script>jQuery(".wp-block-gallery a").fancybox().attr('data-fancybox', 'gallery');</script>
Теперь переходим на сайт и любуемся изменениями. Если все было сделано правильно, то теперь все изображения, добавленные на сайт с помощью WordPress-галереи будут открываться в модальном окне и пролистываться через слайдер.
Интересует разработка сайтов? Хотите быть в курсе последних новостей от нашей команды? Тогда подписывайтесь на нашу группу в вконтакте! А еще мы можем добавить вас в нашу беседу, где мы обмениваемся ценным опытом и бесплатно помогаем новичкам в решении их вопросов!
Понравилась статья? Хотите поддержать нашу команду и не пропустить новые материалы? Тогда подписывайтесь на нашу группу в ВКонтакте или на канал в Телеграм. Там мы не просто уведомляем подписчиков о выходе новых статей, но и делимся результатами различных экспериментов по SEO-продвижению.
Название файла | Размер файла | Дата загрузки |
Скачать Fancybox (CSS и JS внутри) | 24,60 КБ | 14.12.2022 |