3D FlipBook - flipbook cover page flickering and loading improperly on ipad/mobile
s***e@gmail.com
2021-01-22
2021-01-25
The site is here: tonywright-art.com/dancetest/3d-flip-book The cover page flickers when loading. It loads only the bottom half of the cover, and the top half of the cover is actually the second page. Here is my code.
// Sample 1 { function danceOfDeathPageCallback(n) { return { type: 'image', src: 'books/image/danceOfDeath/' + (n + 1) + '.jpg', interactive: false }; }
$('#container').FlipBook({
pageCallback: danceOfDeathPageCallback,
pages: 90,
propertiesCallback: function (props) {
props.cover.color = 0x000000;
props.page.depth /= 100;
props.cover.depth = props.page.depth;
props.sheet.wave = 0.01;
props.cover.padding = 0.002;
props.cachedPages = 100;
props.preloadPages = 100;
props.renderInactivePagesOnMobile = false;
props.pagesForPredicting = 3;
props.renderInactivePages = true;
props.renderWhileFlipping = true;
return props;
},
controlsProps: {
//control properties
autoResolution: {
enabled: false
},
actions: {
cmdSave: {
enabled: false
},
cmdPrint: {
enabled: false
}
},
template: {
html: 'templates/default-book-view.html',
styles: [
'css/black-book-view.css'
],
links: [
{
rel: 'stylesheet',
href: 'css/font-awesome.min.css'
}
],
script: 'js/default-book-view.js',
sounds: {
startFlip: 'sounds/start-flip.mp3',
endFlip: 'sounds/end-flip.mp3',
mainMusic: 'sounds/danceOfDeath.mp3'
}
}
}
});Replies
© All rights reserved
Be careful with depth and wave settings - it can broke the interpolation. If you want flat book:
$('#container').FlipBook({ pageCallback: danceOfDeathPageCallback, pages: 90, bookStyle: 'flat', propertiesCallback: function (props) { props.cover.color = 0x000000; // props.page.depth /= 100; // props.cover.depth = props.page.depth; // props.sheet.wave = 0.01; props.cover.padding = 0.002; props.cachedPages = 100; props.preloadPages = 100; props.renderInactivePagesOnMobile = false; props.pagesForPredicting = 3; props.renderInactivePages = true; props.renderWhileFlipping = true; return props; } });Thank you so much that fixed it!! You're amazing.
Is there a place where this is referenced in the documentation? I didn't see it anywhere.
Predefined sets of properties (bookStyle) is a new feature, so it was not published.
Thanks again! My other issue is that the Sounds are not working. I can't hear the page flip, and my other sound track I am trying to autoload in the background isn't working. Do you have any suggestions?
to get the flip sounds you need to set the template files: https://3dflipbook.net/embedded-video, to understand how to use the background music, watch: https://www.youtube.com/watch?v=WYW9shuWwPs
Can you show me in my code above where to set that? I already edited the template and added the link to the audio file and it was working before but it doesn't work now. I tried to load in my background audio file in there as well but it doesn't work. template: { html: 'templates/default-book-view.html', styles: [ 'css/black-book-view.css' ], links: [ { rel: 'stylesheet', href: 'css/font-awesome.min.css' } ], script: 'js/default-book-view.js', sounds: { startFlip: 'sounds/start-flip.mp3', endFlip: 'sounds/end-flip.mp3', mainMusic: 'sounds/danceOfDeath.mp3' } }
Never mind I fixed it. There was a formatting error. Thanks!