Привіт, сьогодні хотілося б познайомити вас з плагіном Page Flip Image Gallery (FlippingBook), який дозволить створити на вашому сайті приголомшливий ефект книги зі сторінками, які можна перевертати мишкою.
Завантажити вихідні для статті можна нижче
Як буде виглядати створювана нами книга:
Демонстраційний приклад можете подивитися тут:
«Mnogoblog.16mb.com/sample-page»
Або так:
Демонстраційний приклад можете подивитися тут:
«Pageflipgallery.com/demo/»
Інформація про плагін.
Даний плагін є на wordpress.org. давайте оцінимо його показники:
Завантажень: 674473 раз.
Оцінка: 4,1 з 5 зірок, які проголосували 136 користувачів.
Просто відмінні показники - думаю варті вашої уваги!
На жаль даний плагін не русифікований, проте, створити книгу не складе особливих труднощів навіть для новачка.
Установка стандартна - заходимо в панель управління сайтом, в лівому меню вибираємо пункт «Модулі» і його підпункт «Додати новий», в рядок пошуку вводимо FlippingBook і він знаходить один єдиний плагін: Page Flip Image Gallery, тиснемо на посилання встановити і активувати.
Після в лівому меню вашої панелі управління з'явиться новий пункт FlippingBook, який буде розташовуватися відразу ж після пункту «Налаштування».
Пункт FlippingBook включає в себе 3 підпункту:
- Images - тут завантажуються картинки для сторінок книги.
Завантаження зображень для книги.
Тому в першу чергу, нам потрібно завантажити зображення.
Тобто йдемо до підпункту з назвою Images, тут поки що порожньо і є тільки одна кнопочка Create New Gallery - ось на неї і натискаємо:
Вводимо ім'я нашої галереї картинок і тиснемо кнопку Add Gallery.
Тут ми бачимо, що у нас створилася галерея з назвою Многоблог, ми можемо видалити її якщо натиснемо на кнопку Delete Gallery або ж створити ще одну галерею за допомогою кнопки Create New Gallery.
Далі тиснемо на кнопку Upload Images (завантажити картинки).
Тут за допомогою кнопки Select Images завантажуємо потрібне нам кількість картинок, як бачите на скріншоті нижче я завантажив 8 картинок. Далі тиснемо на кнопку Upload.
Як бачите тут також можна скористатися завантаженням архіву з зображеннями (zip), або завантажити зображення через url або по ftp.
Після ви побачите, що навпроти назві галереї з'явилася цифра, що позначає кількість завантажених картинок.
Якщо ви вирішили ще дозагрузіть зображень в потрібну вам галерею, то необхідно скористатися кнопкою Upload Images, якщо ж вас все влаштовує, то продовжуємо і тиснемо на кнопку Create Book.
Відкриваються налаштування створюваної нами книги (в принципі можете для початку залишити все за умовчанням).
Але якщо по докладніше, то давайте переведемо пункти і відразу побачимо, що можна тут налаштувати, для перекладу раджу скористатися плагіном для браузера під назвою Google Translate (або перекладачем від Яндекс бару).
Це ім'я, як книга з'явиться на панелі адміністратора.
Досить велика кількість параметрів, тут вирішуйте самі, що поміняти, але я б порадив вам змінити наступні параметри:
Центр книги - ставлю на значення Ні, так книга виглядає більш природно.
Колір фону - поставте під фон вашої сторінки у мене так він білий.
Фонове зображення - краще поставити немає фону, тоді він більш менш впишеться на вашу сторінку.
Панель навігації - мені так більше подобається книга без панелі управління, з нею вона більше нагадує слайдер.
Все налаштували, далі натискаємо в самому внизу кнопку Add book.
Все в принципі книга вже створена!
Тут обов'язково потрібно звернути увагу на ID вашої книжки. на скріншоті вище (вказано стрілкою праворуч) він дорівнює 2, тобто чому у мене він дорівнює не 1, а просто першу створену книгу я видалив. Даний ID нам потрібен для вставки книги на сайт, але про це пізніше.
Тепер можете натиснути на кнопку Preview і подивитися як буде виглядати книга на вашому сайті.
Якщо не сподобалося, то натисніть на кнопку Book Properties - і змінити параметри відображення книги.
Кнопка Add Pages - потрібна, щоб довантажити картинки для вашої книги.
Також тут є кнопки Add New Book і Delete Book - відповідно для додавання і видалення книги.
Як вставити книгу на сайт?
Припустимо, що ви нарешті налаштували книжку під себе, і нам залишилося тільки вставити її на сайт!
Для цього вам потрібно знати ID вашої книжки, як його дізнатися я згадував трохи вище, але якщо ви забули ID вашої книжки, то в лівому меню панелі керування в пункті FlippingBook виберіть підпункт Manage books and pages і зліва у кожної книжки прописаний її ID.
Так як ID моєї книги 2, то тут я вказав 2, але швидше за все id у вас буде 1, тобто код буде виглядати так:
Все тепер зберігаємо зміни і милуємося сторінкою або записом з 3D флеш книгою!