Розбір установки плагіна FancyBox, BrainTeam

fancybox

Отже, добрий день, настав момент розповіді про те, як я встановлював плагін для відображення картинки в новому вікні і не тільки. Зараз розглянемо докладніше як його встановлювати та налаштовувати.

Плагін називається - Easy Fancybox, він дуже легко встановлюється і спочатку не вимагає жодних налаштувань, працює відразу після активації. Після того, як ви активуєте плагін, всі посилання на JPG, GIF та PNG зображення автоматично відкриваються в окремому вікні.

  • WordPress галереї
  • PDF файли
  • Зображення JPG, GIF, PNG та ін., а також зображення карток
  • Ролики з сайтів, таких як YouTube, Vimeo та Dailmotion
  • Фрейми (призначений для розділення вікна браузера на частини, у кожній з яких відображається інформація з різних джерел.)

Для отримання ще більшої кількості додаткових опцій, можна поставити PRO розширення.

Подивимося, як виглядає зображення після встановлення цього плагіна. Наприклад, ми дивимося будь-яку статтю плагіни на WP на сайті, в ній є зображення, але ми бачимо їх невеликого розміру і текст на них не читаємо. Клацаємо на неї і відкривається окреме вікно з повнорозмірною картинкою. Внизу вікна також є назва самого зображення, при завантаженні на сайт його можна змінити, або зовсім прибрати, щоб не заважало.

розбір

Власне приступимо до процесу встановлення.

Насамперед ми завантажуємо потрібний нам плагін. Завантажити його можна з сайту wordpress.org, або встановити плагін за допомогою стандартної бази плагінів WordPress. Я вибрав другий спосіб (за допомогою стандартної бази плагінів), він найшвидший і найпростіший, тому розпишу цей приклад. Для того, щоб встановити плагін цим методом, йогоне потрібно буде скачувати на ПК. Все, що потрібно – зайти в розділ «Плагіни», після чого натиснути «Додати новий».

розбір

Відкривається сторінка, де потрібно ввести якомога повнішу назву плагіна і натиснути «пошук». Вводимо повну назву плагіна "Easy FancyBox" та натискаємо "пошук". Після цього відкривається сторінка з купою плагінів на запит, знаходимо потрібний і натискаємо «Встановити». Після успішної установки активуємо його. Активувати можна відразу ж після установки, або потім, у списку всіх встановлених плагінів. Все, плагін тепер встановлений та готовий до роботи.

плагіна

Тепер, щоб він точно запрацював, потрібно переконатися, що при завантаженні зображення в його властивостях у пункті «Посилання» було вказано «Медіафайл», інакше плагін не запрацює (іноді це включено за замовчуванням, а в більшості випадків – ні). Там також можна замінити і заголовок, який відображатиметься внизу вікна, при відкритті зображення. Після виконаних маніпуляцій плагін впевнено запрацює.

установки

Плагін встановлений та працює. Тепер я зовсім трохи розповім про його налаштування.

Заходимо на головну сторінку роботи з сайтом, натискаємо пункт «Плагіни», шукаємо там потрібний під назвою Easy FancyBox і натискаємо «параметри». Відображається вікно з параметрами, які можна змінити.

Параметр Overlay задає заднє тло при відкритті зображення, можна змінювати колір і прозорість. Наприклад, чорний колір (#000000 – вписуємо в пункт «Color»), а прозорість змінюємо від 0 до 1 у пункті «Opacity», відповідно, чим значення більше, тим менш прозорим стає фон, при встановленні значення 1, фон абсолютно непрозорий .

Параметр Window, тут ми видозмінюємо саме вікно, де відкривається зображення. Background color – колір тла

Також можназмінити ширину, висоту і саму рамку, за умовчанням стоять значення 560х340х10 (порядок дотриманий).

Behavior - поведінка. Тут я б не радив щось змінювати, крім швидкості відкриття та закриття вікна (Opening speed і Closing speed), за замовчуванням встановлено значення 300.

Параметр Image. Autodetect – перераховані формати зображень, які працюватимуть із плагіном, можна додати свої.

Пункт Behavior я не радив би змінювати, налаштовано все якнайкраще.

Show tittle - це підпис зображення, можна прибрати або залишити.