https://github.com/codrops/BookBlock

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.
https://github.com/codrops/BookBlock

Last synced: about 2 months ago
JSON representation

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

• Host: GitHub
• URL: https://github.com/codrops/BookBlock
• Owner: codrops
• Created: 2012-09-03T15:57:21.000Z (about 12 years ago)
• Default Branch: master
• Last Pushed: 2017-05-28T08:55:08.000Z (over 7 years ago)
• Last Synced: 2024-05-01T11:51:25.748Z (5 months ago)
• Language: HTML
• Size: 875 KB
• Stars: 971
• Watchers: 73
• Forks: 265
• Open Issues: 45
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

BookBlock

=========

A jQuery plugin that will create a booklet-like component that let's you navigate through its items by flipping the pages.

[article on Codrops](http://tympanus.net/codrops/2012/09/03/bookblock-a-content-flip-plugin/)

[demo](http://tympanus.net/Development/BookBlock/)

License: http://tympanus.net/codrops/licensing/

### BookBlock Configuration Options

```js

// page to start on

startPage : 1,

// vertical or horizontal flip

orientation : 'vertical',

// ltr (left to right) or rtl (right to left)

direction : 'ltr',

// speed for the flip transition in ms

speed : 1000,

// easing for the flip transition

easing : 'ease-in-out',

// if set to true, both the flipping page and the sides will have an overlay to simulate shadows

shadows : true,

// opacity value for the "shadow" on both sides (when the flipping page is over it)

// value : 0.1 - 1

shadowSides : 0.2,

// opacity value for the "shadow" on the flipping page (while it is flipping)

// value : 0.1 - 1

shadowFlip : 0.1,

// if we should show the first item after reaching the end

circular : false,

// if we want to specify a selector that triggers the next() function. example: ´#bb-nav-next´

nextEl : '',

// if we want to specify a selector that triggers the prev() function

prevEl : '',

// autoplay. If true it overwrites the circular option to true

autoplay : false,

// time (ms) between page switch, if autoplay is true

interval : 3000,

// callback after the flip transition

// old is the index of the previous item

// page is the current item´s index

// isLimit is true if the current page is the last one (or the first one)

onEndFlip : function(old, page, isLimit) { return false; },

// callback before the flip transition

// page is the current item´s index

onBeforeFlip : function(page) { return false; }

```