BookBlock - плагин для создания эффекта перелистывания страниц

В буклетах, созданных с помощью BookBlock, может быть использован любой контент, например, изображения или текст. Для создания большего реализма, плагин использует различные эффекты, например, такие как тени для страниц.

Мы будем использовать jQuery++ by Bitovi, который имеет некоторые дополнения для jQuery.

Следующая разметка позволит нам добавлять различный контент во враппер (обертку) с классом "cf-item", который представляет собой открытую страницу (левая и правая сторона):

<div id="bb-bookblock" class="bb-bookblock">
    <div class="bb-item">
        <!-- контент -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <div class="bb-item">
        <!-- ... -->
    </div>
    <!-- ... -->
</div>

Плагин вызывается следующим образом:

$(function() {
    $('#bb-bookblock').bookblock();
});

Вы также должны подключить ряд скриптов, которые необходимы для работы (см. один из демо-файлов).

Доступны следующие настройки плагина:

// скорость перелистывания в мс.
speed : 1000,

// эффект для перелистывания.
easing : 'ease-in-out',

// если установлено true, страницы и края будут имитировать тень
shadows : true,

// прозрачность для "тени" для обоих сторон.
// value : 0.1 - 1
shadowSides : 0.2,

// прозрачность для "тени" переворачивающейся страницы.
// value : 0.1 - 1
shadowFlip : 0.1,

// перспектива
perspective : 1300,

// если установлено true, то после последней страницы будет идти первая.
circular : false,

// если мы хотим указать селектор, который вызывает функцию next(). Например: '#bb-nav-next'.
nextEl : '',

// если мы хотим указать селектор, который вызывает функцию prev().
prevEl : '',

// callback после перелистывания страницы.
// page - это индекс текущей страницы.
// isLimit - true если текущая страница последняя (или первая).
onEndFlip : function(page, isLimit) {
	return false;
},

// callback перед перелистыванием страницы.
// page - это индекс текущей страницы.
onBeforeFlip: function(page) {
	return false;
}