Формуємо спливаюче вікно для портфоліо – урок 28
Продовжимо розробку нашого портфоліо і в цьому уроці я знайшов непоганий скрипт спливаючого вікна, спробуємо його використати. Скрипт називається Адаптивний плагін Lightbox.
Для використання скрипта необхідно спочатку підключити його стилі в шапці сайту, а потім можна в футер сайту підключати сам скрипт.. Докладніше про те як це робиться давайте подивимося нижче.
Завантажуємо скрипт зі сховища 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_styles:
|
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/портфоліо/ у коді з'явиться підключений скрипт, а також новий файл стилів.
Файл стилів 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 або Примусово відновити мініатюри. Після запуску активації плагіна, запустіть його роботу і обов'язково дочекайтеся закінчення.
Тепер коли все працює, можна доробляти виведення зображень у спливаючому вікні. Для виведення спливаючого вікна потрібно правильно прописати елемент, при кліку на який буде поверх з'являтися картинка.
Додаємо код у файл footer.php, як показано нижче.
|
1 2 3 4 5 6 7 |
<?php wp_footer(); ?> <script> jQuery(document).ready(function($) { $('[rel="lightbox"]').lightbox(); }); </script> </body> |
З вище зазначеного видно, що картинки будуть з'являтися у спливаючому вікні у тому випадку, коли в тезі буде атрибут rel=”лайтбокс”. Давайте зробимо так щоб у всіх картинок, які посилаються на свій більший варіант, цей атрибут з'явився. Для цього зайдіть у файл 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.
