3D FlipBook - CSS Layers are hidden & extend by drawing layer
o***n@un-it.org
2020-06-02
2020-06-04
I'm new to this plugin and try to get to know the possibilities of it. Before I make the decision to purchase it I need to be sure it's extendable the way I need it. The css layers are not shown in the demo version. This is the code from the demo version's index.html (slightly adapted):
...
$('#container').FlipBook({
pageCallback: theKingIsBlackPageCallback,
pages: 40,
propertiesCallback: function(props) {
props.cssLayersLoader = function(n, clb) {// n - page number
clb([{
css: '.hd {margin-top: 10px; background-color: red; color: white; width:200px; height: 200px}',
html: '<h1 class="hd">THIS IS A LAYER</h1>'
…
the layers exist in the DOM but they're just not visible.
After I get this working, I plan to add a css layer (canvas drawing layer) by which the user can draw on the flipbook pages. Is this managable? In order to have a drawing interaction I need to disable the default flipbook mouse event handling while the drawing mode is on. Does the API provide this feature (disabling of event handling)?
Replies
© All rights reserved
I guess you can do this. Current version does not have such API, but you can edit sources to adopt it for you.
ok I see. But why aren't those css layers visible which I've mentioned? They exist in the DOM but not displayed on any flipbook page. I first need to be sure that the css layering is working.
finally I could figure out what the problem was. Since I just wanted to test the demo locally, I couldn't test it with browsers like Chrome or Firefox due to CORS prevention (on local files). Therefore I used Edge just for testing purposes but (even though there is no CORS issue) it seems that Edge doesn't apply css transformations properly and thus the layers weren't displayed in the viewing frustum at all. After I managed to test the demo in Chrome I finally got it working.