codrops / bookblock

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

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

demo

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

BookBlock Configuration Options

// 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; }

bookblock's Issues

horizontal oriented .bb-bookblock size in percentages + self.end

I am trying to define bookblocks using percentage values (100%/100vh) and in horizontal orientation this ends up with a split line running across the top during transition, which is very obvious when trying to 'flip' full-screen images. The top half appears to shift a pixel or two, and my best attempt at a css fix resulted only in moving the split line to the middle instead of the top. This problem does not occur in vertical orientation.

I am also interested in doing nothing when trying to flip prev/next at self.end, but defining rotateX as 0°/180° breaks bookblocks altogether (ceases flip anywhere). Interestingly, at this point the page is frozen with the split line.

I would additionally be very grateful if mouse scroll control could be implemented similar to Scrollify, although I am trying to figure this out myself. That being said, the above two issues are top priority. Many thanks!

while page flip text get wrap

my flip book preview

but when i flip it the get wrapped in a corner please do help

Image resizing

I was playing around with this plugin and noticed following issue. Lets say i use images which have different size from .bb-bookblock container. During flip they become unscaled and then when thrasition is over they get back in its scaled state. Is it possible to fix this?

Update image list

If I append a new bb-item to my picture list, how do I update BookBlock? The same question applies if I empty all bb-items and add a new list.

Thanking you in advance.

P.S. I can see a public update function, but I don't know how to use it (I'm a grandfather who hasn't kept up with programming options)

P.S. Link to example also works for me. Thank you.

Changing slide speeds

When set to autoplay is there a way to have different slide speeds for every other slide. Or overwrite the default speed for a particular slide? Thanks.

Can we create a submenu with bookblock.js?

Is it possible to create a submenu for each of the main menu items using bookblock.js? I tried one by editing the HTML to include submenu

items, and a bit of addition to the .css file. However, it's giving issues in relation to what the 'current' page is being set to. I can see page.js sets current = page, but the value of the variable 'page' is coming from bookblock.js, somewhere in onEndFlip() perhaps.

Do I need to edit bookblock.js to incorporate submenus? Is this even possible? Some guidance would be appreciated.

Trying an epub implementation on BookBlock

I have made a test to check if BookBlock could be used in an epub online reader.
I create a new index4e.htm file at (https://github.com/lpccoder/BookBlock/blob/master/index4e.html) after forking you project. Also modified the demo4.css file to demo4e.css to avoid centering the text (https://github.com/lpccoder/BookBlock/blob/master/css/demo4e.css)
As you can see in the code I'm trying to control pagination using the jquery scrollTop function. It's a beta (good pagination requires more coding) but the problem I'm facing is that when I push the next page button all the divs resets their scrollTop to zero.
I also take a look at the http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/ code but I can't see where in the code the scrolltop reseting is avoided.
Any suggestions?

Work with dynamic content

Hello!

If dynamically update content, page animation breaks. What I can do with this? Try to call 'update' after data change - have no positive results.

Thanks advice!

Document browser support in wiki

Issue combining Dots nav with Prev/Next nav

I built a BookBlock based on Demo4. I successfully added the dots nav from demo5, but the current dot is not changing when the prev/next buttons are clicked. Any tips on getting the two nav elements to work together?

how to get the target page in onBeforeFlip

i need to know which page the user is going to flip to so i can load the content before the page flip.

Is it possible to jump to a certain page on page load?

Hello,

And thanks for the great plugin. I was wondering if its possible to jump to a certain page, aka if url is something like below. In this case the to a second page of Book. So if the user writes down url like below, the Book would open to this page.

http://xxx.something.com/content.html#item2

Not support PNG images with transparent?

In the Demo5, not support PNG images with transparent?

Dynamic elements

Is it possible to add new pages on the fly?

I want to load a specific page, but then when clicking the next/prev buttons I want to load another page and show that flipping animation.

Page Flicker on Android

When flipping pages on Android tablets the page flickers constantly during the animation. I've only noticed this on Android. No other browsers or devices.

Issue with too much space between paragraphs in demo4 full page layout.

Hey folks. So I am not sure if this is an issue or if it was intended by design. But I figured I would mention it. I was using the code from demo4 (full page book) as a template. However I noticed that whenever I add a new paragraph

to a

in the 'bb-custom-side' class, I tend to get too much space between the paragraphs.

I did not notice this issue in looking at the blog post on the fullpage template, which is a different demo. http://tympanus.net/codrops/2012/12/11/fullscreen-pageflip-layout/ . So it look like there is a difference in the CSS between the two templates. It is a subtle thing, but I figured I would mention it. If you like I can mention it on the comments of the blog post as well. Do you guys know what the difference is in the CSS between these two templates?

IE 10 Not working properly

Hi
this tutorial is very nice , but it's not working in IE10 and 11 . can you give any solution to these problem

Update method error

Whend adding content dynamically(not as last element) and then calling update function, causes logicall error. In IE11 everything works as expected but in FF and CH occurs mistake.

Is this still maintained?

Suppose I need a feature.
I would like to contribute to this project adding it, but I see there are already 3 pull requests that are not merged for a long time.

Also, the license is not friendly open-source. 😭
If this is not maintained anymore, can I smoothly fork this project and maintain my own fork? 💭

Sometimes it can't flipover the page

Hi, developer.

I found a very strange issue, sometimes it's working fine, and sometimes, when I click the arrow to flipover the page, but it doesn't work any more, no js error alerted.

So, when I checked the HTML in chrome developer tool, I found the following HTML generated (It's not a part of my template), what am I doing wrong?

https://www.dropbox.com/s/87vuo9godxxe2a3/Text-1.txt?dl=0

Using BookBlock with scroll

Hi!

In my project I'm using BookBlock for some divs with scroll inside.
However, any time I turn a page it scrolls the div to the top, making the effect a bit ugly.

Am I missing something?

Thanks,
Luis

Star with Book in closed or with cover

hi @botelho how i do to create the BookBlock start with Cover.
so when BookBlock starting, the book is close, just show 50% from the container and the cover for the book.

can you help about that?

Uncaught TypeError: Object #<Object> has no method 'prefixed'

Have this problem with jquery.bookblock.min.js.
Anybody has a clue?

bb-page for displaying the effect cannot be removed automatically

after many times $('#bb-bookblock').bookblock('jump', location); like invocation, bb-page labeled elements would remain there rather then removed after transitionend event completed
example below:

ReactJS

Any reactJS port would be awesome!

Pages containing iFrames are not visible during animation

When I put an iframe inside the code the content of it instantly dissapears when going to the next page, also, if there is an iframe on the next page it will be rendered only when the flipping animation is finished.

The expected outcome is of course, that the iframes are visible also when the animation is running.

Any solution to this? Many thanks!

[enhancement] Add missing bower.json.

Hey, maintainer(s) of codrops/BookBlock!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library codrops/BookBlock is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "codrops/BookBlock",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Demo 2 - Question - How to only display bottom of first page?

I really want to only have a bottom displaying for the first "slide". How do I "hide" or "remove" the top half of the first page? I want it to appear like you are looking at the Calendar cover before you start flipping through the book. Any help is appreciated.
Thanks in advance.

Full screen image used across both pages turning issue

I am having trouble with the flip when using an background image across both pages - can you suggest how to ensure that the background image 'folds' correctly?

Currently it shifts the background image to the right when the right page is turned - the left page turn works great though. See attached image for how the right side shows the left side when turning.

All help is greatly appreciated.

The page before flip :

direction ltr and rtl don't seem to have an effect

I've been trying to configure this plugin to animate in the oposite direction and with a horizontal orientation. The orientation works but the direction doesn't seem to have an effect as the default rtf seems to still be in effect. I've also noticed that shadows also don't seem to be working with this configuration:

$( '.bb-bookblock' ).bookblock({
    orientation : 'horizontal',
    direction   : 'ltr',
    autoplay    : true,
    interval    : 3000,
    circular    : true,
    shadows     : true,
    shadowSides : 0.2,
    shadowFlip  : 0.1
});

<div class="bb-bookblock">
    <div class="bb-item"><img src="image.png"></div>
    <div class="bb-item"><img src="image.png"></div>
    <div class="bb-item"><img src="image.png"></div>
</div>

Not Working in Firefox

@botelho can you please help check, i try to using and the demo in firefox Mac, its doesnt working.

Page Flicker in Chrome for Mac

Chrome Version 39.0.2171.71 (64-bit)
Mac OS X 10.10.1

Two pages are too much for small screens

This script is amazing! Really simple and well done!
I have a little enhancement to ask, maybe an idea for future releases:
Dividing the screen in two vertical pages, in small screens makes the two pages too thin and unreadable. For so small screens should be better to have only one page filling the whole screen.
Is it possible somehow to make this? Could it be a future enhancement?

Thanks for the great job you've done so far!

Crashes on Android HTC One X default browser

For whatever reason, this slider doesn't work very well on this device. I don't have one in hand for testing, but multiple sources have confirmed. Any idea?

Inputs maintain their initial value during animation

If there is an input on a page, and the user changes its value, the input maintains its initial value during the animation.

Issues with Firefox 26?

The page jumps about when turning.....

save last reading page position

this is a great jquery plugin to make html ebook, but the problem comes when the book has so many pages and readers have to go through a lot of flips to get to the last reading position. I have tried with some jquery maintaining last scroll position but no luck, can anyone help to solve this issue?

IE 10 Problem

IE 10 does the flipping wrong.

Include HTML

Hi there,

Is there a way to include HTML instead of images in the BookBlock?

Regards
Franz

resize problem

I'm using bookblock plugin to show content on a site.My page-flip transitions are not smooth initially,meaning half the content of the flipping part hides while transition. However when I resize the page even by a small amount, the transition becomes perfect, any help?

how to update?

in bookblock.js there is public method "update" that dynamically adds new elements
I am trying to call this method after inserting new "bb-item" elements inside the BookBlock using a separate ajax call. I am following the example in index4.html.

I cannot figure out how to call this update method.

Please help.

BookBlock without jQuery

I'm trying to use this library but without using jQuery, i've noticed that there is a bookblock.js https://github.com/codrops/BookBlock/blob/master/js/bookblock.js that doesn't seems to use it but i can't get it working. Can anyone provide a simple example showing how to initialize the page?

BookBlock and hammer.js

I'm trying to use BookBlock with hammer.js to use swipeleft and swiperight to control the page flipping. It works fine, but it could be much better if the pages could follow the swipe movement and start moving as soon as i start moving my finger (following it). Any ideas about how to combine both libraries to get this effect??

Many thanks in advance,

Stopped working OK on latest version of Chrome

On the latest version of Chrome (I have version 33.0.1750.117) this has stopped working correctly. When doing the page flip effect, the page flashes, showing both sides of the page alternating quickly and completely ruining the effect. I have seen this both on PC and Mac. In other browsers and older versions of chrome continues to run perfectly

Images in a slides plugin flicker all the time in BookBlock

I try to use slides.js to add feature of mutiple-image gallary in bookblock pages,but when I turn the page,the right part of the page which contains a slides will flicker,and the left part of the page would not.

Then I try another slides plugin responsiveslides.js,the problem is still there,I guess maybe that's the bug of bookblock.

Behaves OK: in firefox,
Flicker : in chrome , safari of iPad

How to increase speed?

I tried to change "speed" parameter in "$.BookBlock.defaults", but its not working as expected?

When i give 100, same effect as default value 1000.

Not working in Android Webkit Default browser

Only first page flips and after that it doesn't work . Could any help?

adding navigation hyperlinks to bookblock to flip to specified pages

Hey Folks. I really love what you have done with Bookblock. I am using it to develop some research notebooks of my own. I was wondering however, if it is possible to insert navigation hyperlinks in the bookblock. So on the first page, I would like to have a menu to indicate "Introduction", "Methods", "Results", etc., just like a table of contents. I would like the user to be able to click on the table of contents and the hyperlink would take the user to the appropriate page. Is there any way to do this in bookblock now?

how to remove items after initialization?

I'd like to remove items after initialization.

Is there a way to do it?

Autoplay

How to add auto-play button in prev-next buttons.