А найпоширеніший спосіб використання FancyBox на WordPress-блозі - збільшення зображень, як одинарних, так і об'єднаних в галерею. Приклади реалізації всіх перерахованих вище варіантів можна знайти на офіційному сайті плагіна - fancybox.net. А в даній статті ми розглянемо, як легко інтегрувати бібліотеку в наш блог за допомогою плагінів FancyBox For WordPress і Easy FancyBox і зробити їх основні параметри. А також дізнаємося, як підключити FancyBox до WordPress без плагіна.
FancyBox For WordPress: виводимо картинки і галереї красиво
Якщо ви вже працювали з зображеннями в Вордпресс і розміщували їх в записах і на сторінках, то помічали, що картинки з великим розширенням шаблон утискає. І іноді це впливає на коректність відображення інформації, яку ви хотіли передати, через те, що не все можна розібрати. Боротися з цим можна, повісивши на мультимедійний посилання на самого себе. Але в такому випадку при кліці на картинку вона, в залежності від налаштувань, відкриється або в цьому ж вікні як повноцінна сторінка, або в новій вкладці. Погодьтеся, обидва варіанти не самі зручні і вимагають від користувача додаткових дій і часу абсолютно необгрунтовано.
Для усунення такого незручності і вдосконалення процесу відображення картинок на Вордпресс-блозі був розроблений спеціальний плагін FancyBox For WordPress. Він служить тому, щоб відвідувач міг активувати кліком зображення, відкриваючи його поверх інших вікон. Ось так:
Давайте встановимо плагін для нашого сайту зі сховищ Вордпресс.
Активуємо FancyBox for WP і він відразу ж приступає до роботи, застосовуючи до картинок свої базові настройки. У цьому ми можемо переконатися, перейшовши на наш блог, оновивши його й клацнувши по будь-якому з наявних зображень.
При цьому картинка масштабується до великих розмірів і розміщується у спливаючому вікні над іншим контентом, який злегка затемнюється. Щоб закрити модальне вікно, можна клікнути або по хрестику в правому верхньому куті, або в будь-якому місці сторінки з Картинки.
Крім встановлених опцій, передбачаються і більш гнучкі налаштування FancyBox For WordPress. Їх ми можемо знайти в консолі ВП, в пункті меню «Налаштування» - «FancyBox for WP». Перейшовши за посиланням, ми бачимо велику кількість вкладок, що відповідають за редагування тих чи інших параметрів. Вони пов'язані в основному зі зміною зовнішнього вигляду відображення картинок. На жаль, плагін повністю англомовний. Але зараз ми розглянемо всі найцікавіші моменти, які можуть вам знадобитися, якщо дефолтні установки не відповідають вашим потребам.
Стартова вкладка - «Info». Тут розміщені посилання на інформацію про розробників і продукті в цілому. Творці плагіна говорять про те, що якщо ви не хочете вникати в усі запропоновані налаштування, то і без цього базовий варіант установок дає досить привабливий результат. Також вони просять звернути увагу на те, що якщо після редагування ви не помітили змін моментально, це часто зовсім не означає, що FancyBox For WordPress не працює. Якщо у вас встановлений плагін кешування, наприклад Hyper Cache. то необхідно очистити кеш після збереження змін або деактивувати плагін на час роботи з настройками.
Наступний таб - «Appearance». Це сторінка, де ми можемо налаштувати під себе базові опції, що відповідають за зовнішній вигляд спливаючих вікон. Якщо чекбокс відзначений галочкою - функція включена, якщо ж ні - відключена:
- «Border» - вибираємо, чи буде відображатися рамка навколо модального вікна. За замовчуванням - немає. Якщо ми вибираємо варіант «так», з'являється додатково поле для вибору кольору кордону, в шестнадцатиричном форматі (# 000000). Налаштувати ширину рамки можливості немає;
- «Close Button» - визначаємо, чи буде в лайтбоксі кнопка закриття вікна (хрестик) і де вона буде розташовуватися (Left (ліворуч) / Right (праворуч) / Bottom (внизу) / Top (вгорі)). Стартове значення - справа вгорі;
- «Padding» - цей пункт відповідає за настройку в FancyBox For WordPress кольору і ширини відступу від краю спливаючого вікна до розміщеного в ньому зображення. Дефолтний значення - білий, 10 пікселів;
- «Overlay Options» - встановлюємо характеристики заднього затемнює фону, який з'являється під спливаючій картинкою, покриваючи контент всієї сторінки. Спочатку визначені: як колір - сірий, як прозорості (opacity) - 0.3. Властивість прозорості вимірюється від 0.0 до 1.0, і чим менше значення, тим прозоріше буде фон. Відповідно, якщо ви хочете повністю приховати вміст, що залишилося за модальним вікном, можна вибрати opacity: 1;
- «Title» - призначаємо, чи буде виводитися підпис до зображення (тобто значення атрибута title картинки) і яким чином. Тут передбачені настройки розташування назви щодо відступу (padding) спливаючого вікна (Inside (всередині) / Outside (зовні) / Over (поверх)) і його колір. У значеннях «Inside» і «Outside» текст буде розміщений в нижньому відступі модального вікна і під ним відповідно. А при виборі варіанту «Over» назва розташується над нижнім відступом, поверх самого зображення на темній напівпрозорої підкладці;
- «Navigation Arrows» - вибираємо, показувати чи ні стрілки навігації. Вони з'являються при наведенні на зображення.
Внісши зміни, не забуваємо їх зберегти, натиснувши кнопку «Save Changes» внизу сторінки. Тут же ми маємо можливість повернути всі налаштування FancyBox For WordPress за замовчуванням, клікнувши для цього по посиланню «Revert to defaults».
Переходимо до вкладці «Animations». Тут ми налаштуємо функції, що відповідають за контроль анімації спливаючих вікон:
- «Zoom Options» - вибираємо, чи буде під час збільшення і зменшення зображення змінюватися ступінь його прозорості. У цьому ж пункті плагін FancyBox For WordPress дає нам можливість гнучко налаштувати швидкості зуму:
- «Transition Type» - встановлюємо вид анімації для відкривається модального вікна (перше поле) і закривається. На вибір доступні три значення: fade (за замовчуванням) - затухання / прояв, elastic - еластичний, none - без анімації. Хотілося б уточнити, що варіант elastic для відкривається попап увазі анімацію, при якій початкова, менша за розміром, картинка висувається на передній план з вихідного положення, як би підлаштовуючись під розмір екрану і заповнюючи його собою. При закритті лайтбоксу відбувається те ж саме в зворотному порядку;
- «Easing» - в цьому пункті ми можемо підключити до анімації функцію плавності і вибрати один з її численних варіантів окремо для відкриття вікон, закриття та переходу між слайдами. Про що йде мова? Ця функція встановлює швидкість протікання анімації на різних її етапах, що робить її більш реалістичною. Адже в житті дію, вироблене об'єктом, що не починається блискавично і не підтримує одну і ту ж швидкість до моменту закінчення.
Зверніть увагу, що дані установки можуть бути застосовні тільки для тих, що відкриваються / закриваються модальних вікон, у яких в параметрі «Transition Type» вибрано значення elastic.
Наступна вкладка - «Behavior Settings». Вона відповідає за настройки поведінки спливаючого вікна і йде зі статусом «medium». У зв'язку з цим, розробники FancyBox For WordPress попереджають нас, що краще залишити на цій сторінці всі як є, якщо тільки ми дійсно не знаємо, як працювати з розташованими тут параметрами. Тому ми не будемо детально зупинятися на всіх опціях. За що відповідає кожна з них, зрозуміло з скріншоту:
П'ятий таб - «Galleries». Це просунутий рівень налаштувань, що стосуються галерей зображень:
Припустимо, що у вас на сторінці розміщений матеріал, який умовно розділений на кілька смислових блоків. Наприклад: в одному з них ви розміщуєте картинки для ілюстрування процесу створення Landing Page на WP. а в наступному - приклади найбільш вдалих продають сторінок. І ви хочете, щоб ці дві групи зображень не змішувалися в одному модальном вікні, а виводилися в різних лайтбоксах. Щоб здійснити задумане, для початку виберіть опцію плагіна «Do not group images in gallery automatically».
Для другої групи медіафайлів повторіть ті ж дії, але з іншим значенням rel, наприклад: rel = «gal2»;
- «Make a gallery for each post (will only work if your theme uses class =" post "on each post, which is common in WordPress)» - створити галерею для кожного поста (буде працювати, тільки якщо ваша тема використовує клас «post» для кожного поста, що характерно для Вордпресс);
- «Use a custom expression to apply FancyBox» - застосувати для користувача jQuery-вираз для настройки FancyBox For WordPress в разі, якщо пропоновані плагіном варіанти вам не підходять і ви потребуєте більш гнучких індивідуальних установках. Цей варіант краще не використовувати.
Також краще не редагувати і наступні вкладки, вони будуть зрозумілі і корисні тільки просунутим користувачам.
Впевнена, що всіх наведених вище інструкцій вам буде досить для успішного інтегрування FancyBox For WordPress в ваш блог для ефектного відображення зображень в спливающем вікні.
Але не можна не звернути увагу на те, що в інтернеті періодично з'являються скарги користувачів на вразливість плагіна, яка веде до зараження сайтів вірусами навіть без доступу до адмінки Вордпресс і хостингу. Якщо ви зіткнулися з проблемою злому вашого веб-ресурсу, важливо якомога швидше перевірити і очистити віруси з сайту. Я ж хочу запропонувати вам альтернативний варіант для виведення картинок в лайтбоксах. І далі ми познайомимося з плагіном, що становить основну конкуренцію FancyBox для ВП. Саме він використовується на сторінках мого блогу.
Easy FancyBox: основні особливості плагіна
Характерними ж його відмінностями є:
- плагін частково русифікований, тому розібратися в його налаштуваннях самостійно не складе великих труднощів;
- при базових установках картинки автоматично не об'єднує в галереї, Easy FancyBox виводить у спливаючому вікні тільки те зображення, за яким скликали. Щоб відобразити групу файлів в лайтбоксі, необхідно створити стандартну галерею Вордпресс в режимі редагування записи.
Або ж в налаштуваннях плагіна в блоці «Gallery» в поле «Autogallery» вибрати пункт «Все в одній галереї»;
- у варіанті «з коробки» Easy FancyBox розміщує поверх зображень назву, взяту з атрибута alt. Щоб відключити цю опцію, в блоці «Appearance» зніміть галочку біля поля «Показати назву»;
- плагін дозволяє вибрати тип медіафайлів, які будуть відкриватися в модальному вікні.
Яких-небудь істотних недоліків в роботі плагіна не виявлено. Але якщо в ваш шаблон ВП вбудований «рідний» лайтбокс, велика ймовірність конфлікту і може виявитися, що Easy FancyBox для WordPress не працює. В такому випадку має сенс звернутися в службу підтримки.
Інтеграція бібліотеки FancyBox в Вордпресс без плагінів
Якщо ви трепетно ставитеся до питання поліпшення юзабіліті сайту. то напевно вас хвилює швидкість роботи вашого блогу. А ми знаємо, що велика кількість плагінів може уповільнювати процес завантаження сторінок. Тому далі ми розглянемо варіант впровадження jQuery скрипта FancyBox на WordPress без плагіна. Даний спосіб рекомендується застосовувати в тому випадку, якщо ви добре знайомі зі структурою і редагуванням шаблону Вордпресс і маєте досвід роботи з кодом. В процесі можуть виникати конфлікти з іншими скриптами теми, викликані включенням тих чи інших опцій. Вирішення цієї проблеми в кожному окремому випадку буде індивідуальним, тому заздалегідь передбачити всі варіанти складно.
// Fancybox stylesheet. wp_enqueue_style ( 'fancybox-style', get_template_directory_uri (). '/fancybox/jquery.fancybox.css', array (), ''); // Fancybox script. wp_enqueue_script ( 'fancybox-script', get_template_directory_uri (). '/fancybox/jquery.fancybox.js', array ( 'jquery'), '');
Потім відкриваємо для редагування файл теми header.php і в head поміщаємо виклик функції FancyBox: