theproductiveprogrammer/flipbook-viewer

No flipping animation

Closed this issue · 2 comments

jefsev commented

Hi, i see no animation at all.

My code:

 const flipbookPages = flipbookEl.querySelectorAll('.flip-page');

    const opts = {
        backgroundColor: "#000",
        boxColor: "#000",
      }
      
    
    const book = {
        numPages: () => flipbookPages.length,
        getPage: (n, cb) => {
            const cache = []
            if(!n || n > flipbookPages.length) return cb()
            if(cache[n]) return cb(null, cache[n])
        
            const img = new Image()
            img.src = flipbookPages[n-1].src
            img.addEventListener("load", () => {
              cache[n] = {
                img,
                num: n,
                width: img.width,
                height: img.height,
              }
              cb(null, cache[n])
            }, false)
        },
    }

    flipbook(book, 'flipbook', opts, (err, viewer) => {
        if(err) console.error(err);
    
        console.log('Number of pages: ' + viewer.page_count);
        viewer.on('seen', n => console.log('page number: ' + n));
    
        flipNext.onclick = () => viewer.flip_forward();
        flipPrev.onclick = () => viewer.flip_back();
        // zoom.onclick = () => viewer.zoom();
    
    });

Inside flipbookviewer.js i see showFlip() but it's not being called or i don't know how

jefsev commented

NVM :P

const cache = [] should not be inside const book that breaks its.

:P

Ha ha - glad you found it 👍