Здравствуйте, сегодня хотелось бы познакомить вас с плагином Page Flip Image Gallery (FlippingBook), который позволит создать на вашем сайте потрясающий эффект книги со страницами, которые можно переворачивать мышкой.
Скачать исходники для статьи можно ниже
Бизнес сообщество BizNet - здесь
Как будет выглядеть создаваемая нами книга:
Демонстрационный пример можете посмотреть тут:
“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 в правом верхнем углу?
Каким образом можно отключить у этого плагина панель управления, чтобы на экране высвечивалась только книга без полоски с кнопочками. В каком файле что нужно прописывать?
Заранее благодарен за ответ!
Спасибо всё получилось.
не могу найти плагин, он что платный стал
А что он только фото листает? Страницу создать так можно с текстом и баннерами?