turn.js icon indicating copy to clipboard operation
turn.js copied to clipboard

Changing the number of pages in the Steve Jobs example

Open adamlr opened this issue 11 years ago • 5 comments

I'm desperately trying to change the number of pages in the Steve Jobs example of TurnJS. I only have about 22 pages in my book but whenever I change the 'pages' value in the js I get odd results.

adamlr avatar Mar 14 '13 18:03 adamlr

try this to generate them automatically

//page number if (page%2 == 0) { $('.even .footer').text(page); $('.odd .footer').text(page+1); } else { $('.even .footer').text(page-1); $('.odd .footer').text(page); }

Alxmerino avatar Mar 14 '13 19:03 Alxmerino

Thanks for this Alxmerino, could you recommend where would be best to put this code?

The pages are currently defined on the page thusly:

flipbook.turn({ elevation: 50, acceleration: !isChrome(), autoCenter: true, gradients: true, duration: 1000, pages: 112,

Do I need to make a function within the pages option? Something like this...

    pages: {            
        function() {
        //page number
        if (page%2 == 0) {
            $('.even .footer').text(page);
            $('.odd .footer').text(page+1);
        } else {
            $('.even .footer').text(page-1);
            $('.odd .footer').text(page);
        }
        });
    },

adamlr avatar Mar 15 '13 10:03 adamlr

More or less something like this

flipbook.turn({
    width: 960,
    height: 600,
    when: {

        turning: function(e, page, view) {

            var book = $(this),
            currentPage = book.turn('page'),
            pages = book.turn('pages');

            //page number
            if (page%2 == 0) {
                $('.even .footer').text(page);
                $('.odd .footer').text(page+1);
            } else {
                $('.even .footer').text(page-1);
                $('.odd .footer').text(page);
            }

        }
    }
}):

Alxmerino avatar Mar 15 '13 19:03 Alxmerino

Hi adamlr,

flipbook.turn({ elevation: 50, acceleration: !isChrome(), autoCenter: true, gradients: true, duration: 1000, pages: 112,

Have this problem solved from your end? If please send me code too.......

Thanks in advance

KairaKaler avatar Jun 12 '17 09:06 KairaKaler

Can archive it using the following steps

  1. In the HTML remove the following tow div. (are page number 111 & 112 static div)
  1. Now in the script - JS part (Change Pages to the respective number of page Eg. 10 or so)

flipbook.turn({ ...... .... duration: 1000, pages: 10,

bhavikvaishnani avatar Aug 19 '19 06:08 bhavikvaishnani