Формируем всплывающее окно для портфолио – урок 28
Продолжим разработку нашего портфолио и в этом уроке я нашел неплохой скрипт всплывающего окна, попробуем его использовать. Скрипт называется Responsive Lightbox Plugin.
Для использования скрипта необходимо вначале подключить его стили в шапке сайта и затем можно в футер сайта подключать сам скрипт. Подробнее о том как это делается давайте посмотрим ниже.
Скачаем скрипт из хранилища github. Пример работы будущего всплывающего окна можно посмотреть на официальном сайте скрипта.
Заливаем скрипт в папку wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/.
Далее нам надо подключить скрипт и для его правильного подключения мы можем воспользоваться уже знакомым файлом custom-header-script.php, находиться он по адресу wp-content/themes/my_theme_tmp/functions/custom-header-script.php.
Подключаем скрипт и стили в имеющийся код функции my_scripts_method
Скрипт подключается при помощи кода:
|
1 2 3 |
// всплывающее окно для портфолио wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js'); wp_enqueue_script( 'lightbox-portfolio' ); |
Полный листинг функции my_scripts_method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function my_scripts_method() { $tmpDir = get_template_directory_uri(); if ( uGetPostType() == 'portfolio'){ wp_register_script( 'easing-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.easing.min.js'); wp_enqueue_script( 'easing-portfolio' ); wp_register_script( 'mixitup-portfolio', $tmpDir.'/js/simple-portfolio-page/js/jquery.mixitup.min.js'); wp_enqueue_script( 'mixitup-portfolio' ); wp_register_script( 'custom-portfolio', $tmpDir.'/js/simple-portfolio-page/js/custom.js'); wp_enqueue_script( 'custom-portfolio' ); // всплывающее окно для портфолио wp_register_script('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.js'); wp_enqueue_script( 'lightbox-portfolio' ); } } add_action( 'wp_enqueue_scripts', 'my_scripts_method' ); |
Подключаем стили ниже в функции.
|
1 2 |
wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css'); wp_enqueue_style('lightbox-portfolio'); |
Полный листинг функции add_my_stylesheet:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function add_my_stylesheet() { $tmpDir = get_template_directory_uri(); if ( uGetPostType() == 'portfolio'){ wp_register_style('normalize-portfolio', $tmpDir.'/js/simple-portfolio-page/css/normalize.css'); wp_enqueue_style('normalize-portfolio'); wp_register_style('layout-portfolio', $tmpDir.'/js/simple-portfolio-page/css/layout.css'); wp_enqueue_style('layout-portfolio'); wp_register_style('lightbox-portfolio', $tmpDir.'/js/responsive-lightbox-master/jquery.lightbox.min.css'); wp_enqueue_style('lightbox-portfolio'); } } add_action('wp_print_styles', 'add_my_stylesheet'); |
После подключения скрипта и стилей мы можем посмотреть на результат. Если все было сделано правильно, то на странице sitemame/portfolio/ в коде появится подключенный скрипт, а также новый файл стилей.
Файл стилей jquery.lightbox.min.css
|
1 |
<link rel='stylesheet' id='lightbox-portfolio-css' href='https://nature.wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.min.css?ver=4.1' type='text/css' media='all' /> |
Файл скрипта jquery.lightbox.js
|
1 |
<script type='text/javascript' src='https://wp-admin.com.ua/wp-content/themes/my_theme_tmp/js/responsive-lightbox-master/jquery.lightbox.js?ver=4.1'></script> |
После успешного подключения необходимо добавить произвольные размеры изображений, поправить шаблон портфолио в файле archive-my_works.php и указать при клике на какие элементы будет отображаться картинка в большом формате, во всплывающем окне.
1. Зайдем в functions.php и найдем код.
|
1 2 3 4 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); } |
Дополним код новым размером изображения для страницы портфолио:
|
1 2 3 4 5 |
if ( function_exists( 'add_theme_support' ) ) { add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 200, 200, true ); add_image_size( 'portfolio-thumbnail', 270, 203, true ); } |
2. Зайдем в шаблон archive-my_works.php и найдем в нем код:
<img src=»‘.$thymbUrl.'» alt=»» />
Необходимо изменить код для вывода правильного размера изображения.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$thymbUrlThumbnail = wp_get_attachment_link($attachmentId, 'portfolio-thumbnail'); // берем URL миниатюры, которая относится к записи echo ' <div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'"> <div class="portfolio-wrapper"> '.$thymbUrlThumbnail.' <div class="label"> <div class="label-text"> <a class="text-title">'.$item->post_title.'</a> <span class="text-category">'.$dataCatComma.'</span> </div> <div class="label-bg"></div> </div> </div> </div> '; |
Если все сделано правильно, то в разделе портфолио при клике картинка будет открываться в новом окне.
Внимание, может быть проблема и выводом правильного размера миниатюры, но ее легко решить.
Если у вас картинка не поменяла размер как ожидалось, то скорее всего необходимо пересоздать миниатюры портфолио при помощи одного из плагинов Regenerate Thumbnails или Force Regenerate Thumbnails. После запуска активации плагина, запустите его работу и обязательно дождитесь окончания.
Теперь когда все работает, можно дорабатывать вывод изображений во всплывающем окне. Для вывода всплывающего окна необходимо правильно прописать элемент, при клике на который будет поверх появляться картинка.
Добавляем код в файл footer.php, как показано ниже.
|
1 2 3 4 5 6 7 |
<?php wp_footer(); ?> <script> jQuery(document).ready(function($) { $('[rel="lightbox"]').lightbox(); }); </script> </body> |
Из выше указанного видно, что картинки будут появляться во всплывающем окне в том случаи когда в теге будет атрибут rel=»lightbox». Давайте сделаем так чтобы во всех картинок которые ссылаются на свой больший вариант этот атрибут появился. Для этого зайдите в файл functions.php и добавьте в него код специального фильтра:
|
1 2 3 4 5 6 7 8 9 |
add_filter( 'wp_get_attachment_link', 'sant_lightboxadd', 10, 6); function sant_lightboxadd ($content, $id, $size, $permalink, $icon, $text) { if ($permalink) { return $content; } $content = preg_replace("/<a/","<a rel=\"lightbox\"",$content,1); return $content; } |
После всех манипуляций у меня получилась вот такая галерея.
Файлы темы из этого урока
- Базовый курс по веб-дизайну;
- Верстка сайтов;
- Общий курс по CMS WordPress и продолжение курса по разработке шаблонов;
- Разработка сайтов на PHP.
