Здравствуйте, сегодня хотелось бы познакомить вас с плагином Page Flip Image Gallery (FlippingBook), который позволит создать на вашем сайте потрясающий эффект книги со страницами, которые можно переворачивать мышкой.
Скачать исходники для статьи можно ниже
Как будет выглядеть создаваемая нами книга:
Демонстрационный пример можете посмотреть тут:
“mnogoblog.16mb.com/sample-page”
Или так:
Демонстрационный пример можете посмотреть тут:
“mnogoblog.16mb.com/2012/10/%D0%BF%D1%80%D0%B8%D0%B2%D0%B5%D1%82/”
Или так:
Демонстрационный пример можете посмотреть тут:
“pageflipgallery.com/demo/”
Информация о плагине.
Данный плагин есть на wordpress.org, давайте оценим его показатели:
Последнее обновление: 2012-10-12
Скачиваний: 674473 раз!!!
Оценка: 4,1 из 5 звезд, проголосовавших 136 пользователей.
Просто отличные показатели – думаю достойны вашего внимания!
К сожалению данный плагин не русифицирован, однако, создать книгу не составит особого труда даже для новичка.
Установка плагина.
Установка стандартная – заходим в панель управления сайтом, в левом меню выбираем пункт “Плагины” и его подпункт “Добавить новый”, в строку поиска вводим FlippingBook и он находит один единственный плагин: Page Flip Image Gallery, жмем на ссылку установить и активировать.
После в левом меню вашей панели управления появится новый пункт FlippingBook, который будет располагаться сразу же после пункта “Настройки”.
Создание книги.
Пункт FlippingBook включает в себя 3 подпункта:
– Main – здесь представлена информация о плагине (ссылка на станицу плагина и инструкцию как им пользоваться).
– Manage books and pages – управление книгами и их страницами. Это основной раздел – здесь вы сможете создать, удалить книги, посмотреть как будет выглядеть книга (пердпросмотр), изменить настройки отображения книги и страничек.
– 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 (или переводчиком от Яндекс бара).
|
Это имя, как книга появится на панели администратора. |
|
|
Определяет ширину области книгой фона в пикселах или процентах (%). |
|
|
Определяет высоту область книге фон в пикселях. |
|
|
Определяет книгу ширина в пикселях. |
|
|
Определяет книги высоту в пикселях. |
|
|
Установка этого параметра в центрах Да книги в книгу области. |
|
|
Определяет страницу центрирования метод. Если параметр имеет значение Да загруженные файлы будут автоматически центрируется в пределах границ страницы. Если параметр имеет значение Нет, то содержимое страницы будет размещен в верхнем левом углу страницы. |
|
|
Определяет масштабирование содержимого страницы методом. Если параметр имеет значение Да загруженные файлы будут автоматически масштабируется до размеров страницы. Если параметр имеет значение Нет содержимое страницы будет обрезан на странице границ. |
|
|
Определяет страницу правил содержания масштабирования. Если параметр имеет значение Да загруженных файлов будет масштабироваться, это сохранение оригинальных пропорций содержания. Если параметр имеет значение Нет, то содержимое страницы масштабируются без уважения к оригиналу пропорций. |
|
|
Автоматически уменьшает большие изображения для более быстрой загрузки книги. |
|
|
Определяет цвет фона приложения. Пользователи видят этот цвет, в то время как фоновое изображение загружается. Цвет должен быть установлен в RGB в следующем формате: NNNNNN, где N является шестнадцатеричное число (0-F). |
|
 Этот параметр является фоном листать книгу. |
|
|
Вы можете загружать свои собственные изображения фона. Изображение должно быть JPG или PNG файлов |
|
| Определяет положение изображения фона приложения. | |
|
Этот параметр определяет цвет фона страницы. Цвет будет отображаться при загрузке страницы и использовать в качестве цвета для пустых страниц. Цвет должен быть установлен в RGB в следующем формате: NNNNNN, где N является шестнадцатеричное число (0-F). |
|
|
Определяет ширину книги кадра в пикселях. |
|
|
Определяет цвет книге кадра. Цвет должен быть установлен в RGB в следующем формате: NNNNNN, где N является шестнадцатеричное число (0-F). |
|
|
Определяет прозрачность книги кадра. |
|
|
Поверните книга твердом переплете вкл / выкл. |
|
|
Определяет толщину жесткие страницы книги в пикселях. Страницы выглядят более реалистичными для пользователей. |
|
|
Установка этого параметра в Yes делает все страницы книги жесткой. |
|
|
Скорость движения жесткой страницу. |
|
|
Установка этого параметра в Yes включен страницы сглаживания для всей книги. Эта опция полезна, когда исходные файлы страниц больше, то размер страницы книги. Обратите внимание, что эта опция требует дополнительного объема памяти и процессора. |
|
|
Установка этого параметра включается подсветка Да кривой тени. В этом случае черные страницы будет выглядеть более реалистично, когда листать. |
|
|
Позволяет отображать основные страницы. Когда эта функция включена, пользователи видят один слой страниц через отверстия в текущей страницы. Полезно для PNG или SWF страниц с прозрачными областями. |
|
| Тип прелоадер в использовании. | |
|
Этот параметр определяет внешний вид книги. Если его значение Да, книга всегда открыта, если нет, вы можете добавить переднюю и заднюю обложки и сделать ваши книги открываются и закрываются. |
|
|
Номер страницы, с которой книга будет открыта после начала просмотра фильма. Нумерация страниц начинается с # 0. |
|
|
Этот параметр определяет, будет ли листать будет запущена щелчком мыши страницу. Если установлено нет, листать не будет. |
|
|
Определяет стиль указатель мыши на странице углам. Установка этого параметра в Yes получается указатель на пальце при перемещении мыши на странице углу. |
|
|
Определяет стиль указатель мыши на область страницы (за исключением углов). Установка этого параметра в Yes получается указатель на пальце при перемещении мыши на странице. |
|
|
Установка этого параметра позволяет Да пользовательский указатель мыши для перемещения и масштабирования. |
|
|
Установка этого параметра позволяет Да тени вокруг книги. |
|
|
Установка этого параметра в Yes заставляет тень книги, чтобы скрыть падение, когда перелистывание страниц. Это позволяет экономить ресурсы процессора и ускоряет страницы листать анимации. |
|
| Определяет внешний вид тени центре книги. | |
|
Тень интенсивность в середине книги. Эти тени подражать фиксированной кривизной страницу. |
|
| Этот параметр является флип файл источника звука | |
|
Вы можете загрузить свой собственный звук. Звук должен быть mp3 файл (<100 Kb). |
|
|
Управление навигационной панели. Если установлено значение Да, навигационная панель включена. Если установлено значение Нет, навигационная панель отключена. |
|
|
Контролирует функции масштабирования. Если установлено значение Да, масштабирование включено (двойным щелчком и кнопка зума). Если установлено значение Нет, масштабирование отключено. |
|
|
Включает масштабирование по двойному щелчку вкл / выкл. |
|
|
Определяет ширину большого страницы в пикселях. |
|
|
Определяет высоту большие страницы в пикселях. |
|
|
Определяет заголовок текста “Дважды щелкните для увеличения” намек окна. |
|
| миллисекунды | |
|
Управляет функцией печати. Если установлено значение Да, печать включена. Если установлено значение Нет, печать отключена. |
|
|
Определяет текст заголовка из окна печати. |
|
|
Открыть книгу в всплывающем окне |
Достаточно большое количество параметров, здесь решайте сами, что поменять, но я бы посоветовал вам изменить следующие параметры:
Центр книги – ставлю на значение Нет, так книга выглядит более естественно.
Цвет фона – поставьте под фон вашей странички у меня так он белый.
Фоновое изображение – лучше поставить нет фона, тогда он более менее впишется на вашу страничку.
Панель навигации – мне так больше нравиться книга без панели управления, с ней она больше напоминает слайдер.
Все настроили, далее нажимаем в самом внизу кнопку Add book.
Все в принципе книга уже создана!
Здесь обязательно нужно обратить внимание на ID вашей книжки, на скриншоте выше (указано стрелкой справа) он равен 2, то есть почему у меня он равен не 1, а просто первую созданную книгу я удалил. Данный ID нам нужен для вставки книги на сайт, но об этом попозже.
Теперь можете нажать на кнопку Preview и посмотреть как будет смотреться книга на вашем сайте.
Если не понравилось, то нажмите на кнопку Book Properties – и изменить параметры отображения книги.
Кнопка Add Pages – нужна, чтобы дозагрузить картинки для вашей книги.
Также здесь есть кнопки Add New Book и Delete Book – соответственно для добавления и удаления книги.
Осталось еще одна, но очень интересная кнопочка под названием Page Editor – нажав на нее попадаете в редактор странички, в котором можете задать расположение на ней картинок и многое другое.
В данном редакторе слева находятся странички вашей книги, а справ находят картинки вашей галереи – можете их перетаскивать на страничку, если например хотите, чтобы на ней было несколько изображений – формат количества изображений на страницы задается снизу параметр Select a layout (на скриншоте указан стрелочкой).
Как вставить книгу на сайт?
Допустим, что вы наконец настроили книжку под себя, и нам осталось только вставить ее на сайт!
Для этого вам нужно знать ID вашей книжки, как его узнать я упоминал чуть выше, но если вы забыли ID вашей книжки, то в левом меню панели управления в пункте FlippingBook выберите подпункт Manage books and pages и слева у каждой книжки прописан ее ID.
Теперь заходим в редактор нужной нам странички или же поста (записи), открываем вкладку HTML и прописываем в нужное нам место следующий код:
[book id=’2? /]
Так как ID моей книги 2, то здесь я указал 2, но скорее всего id у вас будет 1, то есть код будет выглядеть так:
[book id=’1? /]
Все теперь сохраняем изменения и любуемся страничкой или записью с 3D флеш книгой!
После нажатия кнопки Add book белый экран. Картинки добавляются, а книга не создается. ID нет – пустая строка. что делать?
Спасибо за пояснение, все ясно и понятно.
В режиме редактирования страниц зависает. Показывает что грузится, доходит шкала, и дальше не фурычит. Где искать причину?
До этого несколько раз перенастраивала книгу и вроде работало. А в итоге сохранилось не так и не исправить((
Огромное спасибо за вашу статью! Искала именно это!
Увидела, что это все же демо-версия плагина.
В чем заключаются ее ограничения? Сроком действия?
Или тем, что в правом верхнем углу и внизу под книгой ссылка на их сайт присутствует?
Подскажите пожалуйста как убрать ссылку Demo в правом верхнем углу?
Каким образом можно отключить у этого плагина панель управления, чтобы на экране высвечивалась только книга без полоски с кнопочками. В каком файле что нужно прописывать?
Заранее благодарен за ответ!
Спасибо всё получилось.
не могу найти плагин, он что платный стал
А что он только фото листает? Страницу создать так можно с текстом и баннерами?