BookBlock Revised

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 ?

   Reply
   • 2

     Did you ever figure out a way to not have the front and back? The site that led me here http://www.leggiadro.com/lookbook/ seems to have figured it out. This is what I need to copy and I’m not a coder. I’m lost how to begin and hoping to find some direction/tutorial of the steps. Thanks.
2. 3

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

   Reply
3. 4

   config.$bookBlock.bookblock is not a function

   and images are not display in the page though the path are exact

   Reply
4. 5

   Awesome! I love it! I used this thing on this site: http://utajanlo.hu/egzotikus/

   Reply
5. 6

   I have no words to thank you. i grateful to you. thanks.

   Reply
6. 7

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

   Reply
7. 8

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

   Reply
8. 9

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

   Thanks.

   Reply
9. 10

   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

   Reply
10. 11

    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

    Reply
    • 12

      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.
11. 13

    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.

    Reply
    • 14

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

      flip view is not working on IE9. Is there any solution?
12. 16

    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.

    Reply
    • 17

      Would you mind pasting that part of the code here?
13. 18

    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"

    Reply
    • 19

      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
14. 20

    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

    Reply
15. 21

    Hi,

    Love your plugin.
    But since I’ve started using LESS for my css, when turning BookBlock pages I see like a delay of application of styles defined with LESS rules …
    What does it have to do with?

    Thanks

    Reply
16. 22

    I am having a visibility issue and am uncertain of how to resolve it. I used demo 1 as a base, then changed the size in .bb-bookblock { to be 612px wide x 387px high. When I test it part of the book (bottom and right sides) disappears when the transition is happening, then reappears when it is done. What do I need to adjust to fix this? Sorry, not super experienced with transforms.

    Reply
17. 23

    Super cool demo, I like it. One thing, was restructuring some of the demos, and am having problems getting buttons within the bb-bookblock to work consistently. The first page with buttons will work, but subsequent pages will not.

    Reply
18. 24

    Hi Pedro ,

    ” config.$bookBlock.bookblock is not a function” and images are not display in the page though the path are exact . Where is the problem ?

    Reply

Follow this discussion