3D FlipBook - Using a custom Javascript click function when links in the whole flipbook are clicked, global cssLayersLoader
We have a custom html block and added a <a></a> to it. We added a class with a parent <span class="temp"></span> around it.
We use these links to incorporate shop links in this brochure. We like to put a click event on it so we can add utm parameters to every link. So we would like to use a javascript or jquery function with click event to do this.
We like to use the ready function in the General tab. But somehow we cant get that working.
The code we are using is related to: https://3dflipbook.net/question?id=1652
Can you share any documentation on how to use functions in the Flipbook please?
Our code in the first slide for testing, this ONLY works on the first page, not on the second or third, etc.
function init(c,a) {
console.log('init');
c.find(".testlink").on("click", function(e) {
console.log('testlink');
});
}; init
The code we thought should have worked:
function init(scene) {
const utmString = '?utm_source=brochure&utm_medium=flipbook&utm_campaign=brochure&utm_content=bekijk_bestel';
jQuery(scene.view.getContainer()).find('.fb_flip_hotspot > a').on('click', function(e) {
let href = $(this).attr('href');
href += utmString;
$(this).attr('href', href);
});
} init
But it seems the custom html blocks aren't accessible in jQuery(scene.view.getContainer()).
Is there an overview of events we can hook into? Like init and ready?
I like to buy Pro, but I see support questions aren't answered for more than a month. Does this have a reason?
The second code will not work, because CSS layers are loading dynamically. The first should if you use it correctly. Check this example https://3dflipbook.net/css-layer-highlight .
Thanks. But I am not sure this will help.
We are looking for a way to use 1 function, could be init, that will add an on click on html block with a dynamic inside.
The first code IS working, but ONLY on the first page. You mention we don't use it correctly, can you guide me in the right direction on why we don't use it correctly at the moment?
I checked your link and the code in the article. We use the WordPress plugin so it works a bit different probably. But the init function looks the same. It has a c.find() right after the init(c,a).
Example: https://hox.nl/brochure-kerstpakketten/
You need to use this code for every page where you want to change links. Every CSS layer has its own JS handler. If you want to use single handler for all pages you need to replace cssLayersLoader from book ready function with your own one.
Thanks for the quick reply. And how do I do this?
Use this book ready function:
function ready(scene) { var cssLayersLoader = scene.book.p.cssLayersLoader; scene.book.p.cssLayersLoader = function(n, clb) { cssLayersLoader(n, function(ls) { var nls = []; for(var i = 0; i < ls.length; ++i) { var l = ls[i]; nls.push({ html: l.html, css: l.css, js: function(c, p) { console.log('init'); c.find('.testlink').on('click', function(e) { console.log('testlink'); }); return l.js(c, p); } }); } return clb(nls); }); }; } readyThanks for helping. I tred this code but it didnt work:
Uncaught (in promise) TypeError: clb is not a function at eval (eval at (client.min.js?ver=1.15.2:1:7906), :19:14) at 3d-flip-book.min.js?ver=1.15.2:1:120928 at props.cssLayersLoader (client.min.js?ver=1.15.2:1:8799) at 3d-flip-book.min.js?ver=1.15.2:1:120553 at scene.book.p.cssLayersLoader (eval at (client.min.js?ver=1.15.2:1:7906), :3:5) at client.min.js?ver=1.15.2:1:7925 eval @ VM12922:19 (anonymous) @ 3d-flip-book.min.js?ver=1.15.2:1 props.cssLayersLoader @ client.min.js?ver=1.15.2:1 (anonymous) @ 3d-flip-book.min.js?ver=1.15.2:1 scene.book.p.cssLayersLoader @ VM12922:3 (anonymous) @ client.min.js?ver=1.15.2:1 Promise.then (async) ready @ client.min.js?ver=1.15.2:1 scene.bookBuilder @ 3d-flip-book.min.js?ver=1.15.2:1 BookPropsBuilder.ready @ 3d-flip-book.min.js?ver=1.15.2:1 ClbBookPropsBuilder.test.onLoad @ 3d-flip-book.min.js?ver=1.15.2:1 ImageBase.finishLoad @ 3d-flip-book.min.js?ver=1.15.2:1 (anonymous) @ 3d-flip-book.min.js?ver=1.15.2:1 Promise.then (async) PdfImage.init @ 3d-flip-book.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 Promise.then (async) (anonymous) @ client.min.js?ver=1.15.2:1 Pdf.init @ client.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 Promise.then (async) (anonymous) @ client.min.js?ver=1.15.2:1 Promise.then (async) Pdf @ client.min.js?ver=1.15.2:1 get @ client.min.js?ver=1.15.2:1 pageCallback @ client.min.js?ver=1.15.2:1 ClbBookPropsBuilder @ 3d-flip-book.min.js?ver=1.15.2:1 (anonymous) @ 3d-flip-book.min.js?ver=1.15.2:1 (anonymous) @ 3d-flip-book.min.js?ver=1.15.2:1 Promise.then (async) build @ 3d-flip-book.min.js?ver=1.15.2:1 View @ 3d-flip-book.min.js?ver=1.15.2:1 BookView @ 3d-flip-book.min.js?ver=1.15.2:1 _libs.$.fn.FlipBook @ 3d-flip-book.min.js?ver=1.15.2:1 init @ client.min.js?ver=1.15.2:1 renderFullscreen @ client.min.js?ver=1.15.2:1 render @ client.min.js?ver=1.15.2:1 renderInstances @ client.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 Promise.then (async) start @ client.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 __webpack_require__ @ client.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 __webpack_require__ @ client.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 (anonymous) @ client.min.js?ver=1.15.2:1 VM12922:11I checked and the function is executed twice somehow. So return clb(nls) is run twice on every page load/turn. I now used a if (typeof clb === 'function') {return clb(nls); } and that works.
Remove all JS code from the CSS layers and use only this ready function.
I did it like this: https://monosnap.com/file/gtRHlbwUfCoRQreuNCUnJxT6mCtRHG
So complete code now:
var cssLayersLoader = scene.book.p.cssLayersLoader; scene.book.p.cssLayersLoader = function(n, clb) { cssLayersLoader(n, function(ls) { var nls = []; for(var i = 0; i < ls.length; ++i) { var l = ls[i]; nls.push({ html: l.html, css: l.css, js: function(c, p) { const utmString = '?utm_source=brochure&utm_medium=flipbook&utm_campaign=brochure&utm_content=bekijk_bestel'; c.find('.fb_flip_hotspot > a').on('click', function(e) { let href = $(this).attr("href");href += utmString;$(this).attr("target", "_blank").attr('href', href); }); return l.js(c, p); } }); } if (typeof clb === 'function') { return clb(nls); } }); };Do I still need to remove anything you think?
you need to use full code
function ready(scene) { //... } readynot just the function body.
huh, but in the WordPress plugin, see monosnap screenshot, it says that function ready() { isnt required.
there is an example of the ready function