BookBlock jQuery Plugin

Question

I am using the BookBlock plugin. It is working very well, but I can't seem to get the plugin to flip newly pages which were loaded with AJAX.

Anybody have an idea on how to re-initialise the plugin so it "sees" the new pages?

My code for BookBlock:

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 : 500,
                shadowSides : 0.8,
                shadowFlip : 0.4,
                onEndFlip : function(prev, next, isLimit) {
                    $nav.removeClass('bb-current');
                    $dot = $('.navigation_dots').find('div.dot:eq(' + next + ')');
                    $dot.addClass('bb-current');

                    if (isLimit) {
                        console.log('load new content here');
                        $("<div>").load("line-up.html #bb-bookblock", function () {
                            $("#bb-bookblock").append($(this).find("#bb-bookblock").html());
                        });
                        initEvents();   // <--- This not working
                    }
                }
            } );
            $nav = config.$bookBlock.prev('div.navigation_dots').children('div.dot');
            initEvents();
        },
        initEvents = function() {

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

            // add navigation events
            config.$navNext.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "next" );
                return false;
            } );

            // add navigation events
            $nav.each(function (i) {
                $(this).on('click touchstart', function (event) {
                    var $dot = $(this);
                    $nav.removeClass('bb-current');
                    $dot.addClass('bb-current');
                    config.$bookBlock.bookblock('jump', i + 1);
                    return false;
                });
            });

            config.$navPrev.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "prev" );
                return false;
            } );

            config.$navFirst.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "first" );
                return false;
            } );

            config.$navLast.on( "click touchstart", function() {
                config.$bookBlock.bookblock( "last" );
                return false;
            } );

            // add swipe events
            $slides.on( {
                "swipeleft" : function( event ) {
                    config.$bookBlock.bookblock( "next" );
                    return false;
                },
                "swiperight" : function( event ) {
                    config.$bookBlock.bookblock( "prev" );
                    return false;
                }
            } );

            // add keyboard events
            $( document ).keydown( function(e) {
                var keyCode = e.keyCode || e.which,
                    arrow = {
                        left : 37,
                        up : 38,
                        right : 39,
                        down : 40
                    };

                switch (keyCode) {
                    case arrow.left:
                        config.$bookBlock.bookblock( "prev" );
                        break;
                    case arrow.right:
                        config.$bookBlock.bookblock( "next" );
                        break;
                }
            } );
        };

    return { init : init };

})();

Page.init();

Thanks in advance.

score 1 · Answer 1 · answered May 13 '14 at 11:49

1

I was going through the same problem, and the following worked for me:

    jQuery(document).ready(function($){
    $("#bb-bookblock").bookblock(); //To initialize
    $("#bb-nav-next").on("click",function(e){
        e.preventDefault();
        $.get("long.php",function(data){    //load whatever you want to first
            $("#bb-bookblock").append("<div class='bb-item'>"+data+"</div>").bookblock();   //append a .bb-item div in the #bb-bookblock div and re initialize
            $("#bb-bookblock").bookblock('next');   //finally calling the next()
        });
    });
});

I agree that the approach is different but I guess the aim is load pages via AJAX and then turn the page which worked for me. You can use the same in your code just call $("#bb-bookblock").bookblock(); whenever you want to load the new page.

answered May 13 '14 at 11:49

SuperNOVA

721
7
15

Note that although the above worked for me, but it also started from the first page which made it worthless to use. Even the startPage option didn't work in this case and there is no reinitialize option in the plugin. So, in the end what I did was since I had fixed number of pages I used 17(number of pages) .bb-item empty pages and then used the above code to make ajax work. Hope this helps – SuperNOVA Jun 04 '14 at 06:22
Anriëtte, SuperNova, Did you ever manage to get this working? I could not. I append the images, then call the code in your post (var Page = (function() {... and the 'updatne' but to no avail. I would look forward to hearing from you. – Cymro Aug 02 '20 at 12:41

BookBlock jQuery Plugin

1 Answers1