blasten / turn.js

The page flip effect for HTML5
www.turnjs.com
Other
7.22k stars 2.48k forks source link

Changing the number of pages in the Steve Jobs example #308

Open adamlr opened 11 years ago

adamlr commented 11 years ago

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.

Alxmerino commented 11 years ago

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

adamlr commented 11 years ago

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);
        }
        });
    },
Alxmerino commented 11 years ago

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

        }
    }
}):
KairaKaler commented 7 years ago

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

bhavikvaishnani commented 5 years ago

Can archive it using the following steps

1) In the HTML remove the following tow div. (are page number 111 & 112 static div)

2) Now in the script - JS part (Change Pages to the respective number of page Eg. 10 or so)

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