How to increase the amount of pages in DOM of turn.js

Question

Turn.js can work with very long flipbooks. That is, there’s no limit regarding the amount of pages that it can contain. This is because turn.js only keeps in DOM the last 6 pages no matter how long the book is. There will still be references to the content that was previously loaded, but it’s possible to reduce the cache in order to release memory.

I want to keep the first 7 pages in the DOM. How can do this? pagesInDOM limitation is 6 as defined in turn.js.

html

<div id=”flipbook”>
<div class=”hard”>Page 1</div>
<div class=”hard”>Page 2</div>
<div class=”hard”>Page 3</div>
<div class=”hard”>Page 4</div>
<div class=”hard”>Page 5</div>
<div class=”hard”>Page 6</div>
<div class=”hard”>Page 7</div>
<div class=”hard”>Page 8</div>
<div class=”hard”>Page 9</div>
<div class=”hard”>Page 10</div>
</div>

js

 var oTurn = $('#flipbook').turn({
        width: 1700,
        height: 850,
        elevation: 50,
        gradients: false,
        autoCenter: true,
        acceleration: true,
        start: function (event, pageObject, corner) {
            if (pageObject.next === 1)
                event.preventDefault();
        },
        turning: function (event, page, view) {
            if (page === 1)
                event.preventDefault();
        }
    });

At Stack Overflow we expect you to have had a go yourself - either googling or writing some code (or even just pseudocode). Can you tell us what you've tried first - so that we don't duplicate your effort (and to show us you have put some effort in)? — Taryn East, Oct 16 '15 at 06:50

score 3 · Accepted Answer · answered Sep 15 '16 at 13:42

The pagesInDOM variable is hard coded in turn.js and I haven't found a way to pass a different value as turn.js extends jQuery. I would like to see it available as an option when instantiating turn but the project now seems dead. The only solution I've found is to go into the file and manually assign it a different value, in your case pagesInDOM = 7;.

That said, there is a comment in the unminified version just above the declaration that states:

// Number of pages in the DOM, minimum value: 6
pagesInDOM = 6,

I did some testing and when the book has more than 4 pages and this value goes below 6, the pages towards the end of the range aren't loaded and you'll find blank pages when flipping through the book. I believe this is due to the range function which determines if another page should be loaded while flipping.

From turn.js:

// Returns a range of pages that should be in the DOM
// Example:
// - page in the current view, return true
// * page is in the range, return true
// Otherwise, return false
// 1 2-3 4-5 6-7 8-9 10-11 12-13
//   **  **  --   **  **
range: function(page) {
    var remainingPages, left, right, view,
    data = this.data();
    page = page || data.tpage || data.page || 1;
    view = turnMethods._view.call(this, page);
    if (page<1 || page>data.totalPages)
        throw turnError('"'+page+'" is not a valid page');
    view[1] = view[1] || view[0];
    if (view[0]>=1 && view[1]<=data.totalPages) {
        remainingPages = Math.floor((pagesInDOM-2)/2);
        if (data.totalPages-view[1] > view[0]) {
            left = Math.min(view[0]-1, remainingPages);
            right = 2*remainingPages-left;
        } else {
            right = Math.min(data.totalPages-view[1], remainingPages);
            left = 2*remainingPages-right;
        }
    } else {
        left = pagesInDOM-1;
        right = pagesInDOM-1;
    }
    return [Math.max(1, view[0]-left),
            Math.min(data.totalPages, view[1]+right)];
},

In short, change the value of pagesInDOM in turn.js to 7 and you should be able to acheive your desired results.

score 1 · Answer 2 · answered Apr 08 '19 at 20:21

If you want to set the pagesInDOM dynamically you can pass in the constructor. (I don't know why this was hardcoded in the library)

const pagesInDOMDynamic = 8;
        $('#flipbook').turn({
            width: '300px',
            height: '300px',
            pagesInDOM: (pagesInDOMDynamic < 6) ? 6 : pagesInDOMDynamic  // pass the value to the constructor, If value is less than 6 pass 6 here
        });

And then in Turn.js add this line in init function

turnMethods = {
  init: function(options) {
    pagesInDOM = options.pagesInDOM; // retrieve and set the value,

How to increase the amount of pages in DOM of turn.js

2 Answers2