BookBlock Revised

The content flip plugin BookBlock has been updated and improved. Content can be flipped vertically and horizontally, and we've added support for RTL among other things.

BookBlock Revised

View demo Download source

We’ve updated BookBlock, the content flip plugin. It has undergone some major changes with some improvements and we’ve added some new functionality. Take a look at the original article to see how to use it and what options are available.

Demos

We’ve updated the demos and added some different examples:

Summary of Changes

  • Removal of unnecessary and outdated prefixes in the CSS
  • Many styles that were added with JS before are now in the stylesheet. This allows for a better control.
  • We’ve added support for horizontal flipping (see demo 2)
  • We’ve added support for RTL (see demo 3)
  • We’ve added methods for going to the first and last page
  • There is a Vanilla JS version of the plugin
Previous:
Next:

Tagged with:

Feedback 40

  1. 1

    I have a wonder. How to make this on flip effect like in the demo Experimental Page Layout Inspired by Flipboard but without the front and back cover page. It would bring more nice effect. Any idea or suggestion how to do ?

  2. 2

    Hello! Can you make a full width background image instead of just a background colour? Because I tried but my background image splited half.

  3. 6

    how to use this plugin for dynamic page..am using it for jquery mobile..it does not working..how to implement it

  4. 7

    i need a jquery (like flipboard ) for dynamic pages..am retrieving the latest post through json..i want to implement a flipboard animations

  5. 8

    Hi Pedro, for Chrome and Firefox work very good, but don´t work for IE, How I can search a solution?

    Thanks.

  6. 9

    Hello Pedro, I’ve been tinkering with Bookblock and am impressed with it. Great stuff! Could be good for sample pages of layout work.

    I began by previewing results in Safari where all looked good but on opening the same test files in Firefox (and reportedly IE from a friend who viewed what I’d been doing) there was a major difference. In Safari I was able to load PDF pages and they displayed and flipped just fine. In Firefox and IE PDFs do not display. I can convert the pages to Jpeg and they work but text rendering is poor by comparison with PDF.

    Any idea why PDFs display in Safari but not Firefox and IE? Have you noticed this and maybe found a workaround for good text display?

    Many thanks
    Pete

  7. 10

    Hi Pedro
    I am having an issue with Chrome & Safari only recently that the page flip is now flickering see – http://bondichai.com.au/the-perfect-recipe/
    Your example is fine on this site but if I download the sample files and then view locally they are flickering also. Is there something I’m missing or is this something new with Chrome v33

    • 11

      Hi Glen, there was indeed an update to the bookblock.css file. The changes were only made in the GitHub repo though, my mistake. The zip file is now updated! Let me know if it works for you. Cheers.

  8. 12

    Hello Pedro… great plugin, but im stuck on a problem that i can’t solve cause im kinda new in the JavaScript world.
    In the previous (not revised) tutorial you said that to get the current page index we need:
    var current = 0;
    $(‘#bb-bookblock’).bookblock({
    onEndFlip : function(page){
    current = page;
    }
    });

    i need this so i can sync different audio on different page and autoplay it (not with a button) which i know how to do but i need the current page number and with the code that you provided above i don’t get it for some reason…maybe i put it in the wrong place in the code, or i do something terribly wrong with the syntax :) i don’t know if i should use onBeforeFlip, onEndFlip or just get the current variable from the plugin but i don’t know how…please help.

    Thanks.

    • 13

      Try replacing onEndFlip : function(page) with onEndFlip : function(old, page, isLimit). Let me know if it works. Cheers

  9. 15

    HI Pedro, thanks for the reply.

    I tried what you suggested about replacing onEndFlip but i still don’t get the index of the page…i call the function right below the tag and the global variable current initialized on 0, and i put a alert(“Page is:” +current) right below config.$bookBlock.bookblock( ‘next’ ); where i add the navigation events so i can get the alert and the index every time i click next just for checking and debugging and all i get is “Page is: 0″ on every slide…i hope im not doing something terribly wrong on my side.

  10. 17

    var current = 0;
    $(‘#bb-bookblock’).bookblock({
    onEndFlip : function(old, page, isLimit){
    current = page;
    }
    });

    var Page = (function() {

    var config = {
    $bookBlock : $( ‘#bb-bookblock’ ),
    $navNext : $( ‘#bb-nav-next’ ),
    $navPrev : $( ‘#bb-nav-prev’ ),
    $navFirst : $( ‘#bb-nav-first’ ),
    $navLast : $( ‘#bb-nav-last’ ),
    },

    init = function() {
    config.$bookBlock.bookblock( {
    speed : 1000,
    shadowSides : 0.8,
    shadowFlip : 0.4,
    } );
    initEvents();
    },
    initEvents = function() {

    var $slides = config.$bookBlock.children();

    // add navigation events

    config.$navNext.on( ‘click touchstart’, function() {
    config.$bookBlock.bookblock( ‘next’ );
    alert(“Page is: ” +current);
    /////////////////////////////////////////////////////////////////
    var allaudio = document.getElementsByClassName(‘audio’);
    for( var i=0; i<allaudio.length; i++)
    {
    allaudio[i].pause();
    allaudio[i].src = allaudio[i].src;
    }
    /////////////////////////////////////////////////////////////////
    return false;
    } );

    Here is what i do… and on every next click i get "Page is: 0"

    • 18

      The onEndFlip function declaration

      onEndFlip : function(old, page, isLimit){
      current = page;
      }

      should be inside of the initialization of the BookBlock which in your case is inside the init function. So your init function should look like:

      init = function() {
      config.$bookBlock.bookblock( {
      speed : 1000,
      shadowSides : 0.8,
      shadowFlip : 0.4,
      onEndFlip : function(old, page, isLimit){
      current = page;
      }
      } );

      initEvents();
      }

      I think this should solve your problem.
      Cheers

  11. 19

    Hi, very nice plugin. I was wondering if there a possibility (and how to do that) for small tablets and smartphones switch to one page version. What I mean is to target the narrow screens and in place of twi horizontal pages make flip page by page, like in FullscreenBookBlock plugin?

    Thanks

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>