3D FlipBook - Link to external site?
s***e@gmail.com
2021-02-07
2021-02-08
Hi there, I have looked at the Youtube video example as well as the example you posted but it isn't clear how to make a link appear in the book, only on the final page. So only on one page of the book. I am using css layers according to the example you mentioned, but the link appears on all pages. Please help! Here is my code. You can see that I used the code from your examples to add the css layer. I want the link to take me to "http://tonywright-art.com/" and I added that in the a href link section. Any help would be appreciated!
// Code begins below in the comment.
Replies
© All rights reserved
var html = [ '<div class="page">', '<a href="http://tonywright-art.com/" class="link go-page" data-page-n="90" style="bottom: 160px; left: 80px; width: 680px; height: 45px;">Return to Tony Wright Art</a>', '</div>' ].join(''), css = [ '.page {', 'position: relative;', 'width: 1024px;', 'height: 1448px;', '}', '.page .link {', 'background-color: white;', 'display: block;', 'position: absolute;', 'opacity: 0.1;', '}', '.page .link:hover {', 'opacity: 0.2;', '}', '.page .link:active {', 'opacity: 0.3;', '}' ].join(''), js = [ 'function init(c, a) {', 'c.find(".page .go-page").on("click", function(e) {', 'e.preventDefault();', 'var page = parseInt(a.$(e.target).attr("data-page-n"));', 'console.log(page);', 'a.scene.ctrl.goToPage(page-1);', '});', 'return {};', '}; init' ].join(''); // Sample 1 { function danceOfDeathPageCallback(n) { return { type: 'image', src: 'books/image/danceOfDeath/' + (n + 1) + '.jpg', interactive: false }; } $('#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.000; props.cachedPages = 100; props.preloadPages = 100; props.renderInactivePagesOnMobile = false; props.pagesForPredicting = 3; props.renderInactivePages = true; props.renderWhileFlipping = true; props.sounds = true; props.cssLayersLoader = function (n, clb) { if (!n) { // all layers are inside one iframe so we need define styles just once clb([{ css: css, html: html, js: js }]); } else { clb([{ html: html, js: js }]); } }; return props; }, 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' } } }); </script> </body> </html> <div class="container" id="container"></div> <!-- Audio Player --> <audio class="play-on-shown" id='player' src="sounds/danceOfDeath.mp3" controls autoplay></audio> <script src="js/libs/jquery.min.js"></script> <script src="js/libs/html2canvas.min.js"></script> <script src="js/libs/three.min.js"></script> <script src="js/libs/pdf.min.js"></script> <script src="js/dist/3dflipbook.js"></script> <script type="text/javascript"> var html = [ '<div class="page">', '<a href="http://tonywright-art.com/" class="link go-page" data-page-n="90" style="bottom: 160px; left: 80px; width: 680px; height: 45px;">Return to Tony Wright Art</a>', '</div>' ].join(''), css = [ '.page {', 'position: relative;', 'width: 1024px;', 'height: 1448px;', '}', '.page .link {', 'background-color: white;', 'display: block;', 'position: absolute;', 'opacity: 0.1;', '}', '.page .link:hover {', 'opacity: 0.2;', '}', '.page .link:active {', 'opacity: 0.3;', '}' ].join(''), js = [ 'function init(c, a) {', 'c.find(".page .go-page").on("click", function(e) {', 'e.preventDefault();', 'var page = parseInt(a.$(e.target).attr("data-page-n"));', 'console.log(page);', 'a.scene.ctrl.goToPage(page-1);', '});', 'return {};', '}; init' ].join(''); // Sample 1 { function danceOfDeathPageCallback(n) { return { type: 'image', src: 'books/image/danceOfDeath/' + (n + 1) + '.jpg', interactive: false }; } $('#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.000; props.cachedPages = 100; props.preloadPages = 100; props.renderInactivePagesOnMobile = false; props.pagesForPredicting = 3; props.renderInactivePages = true; props.renderWhileFlipping = true; props.sounds = true; props.cssLayersLoader = function (n, clb) { if (!n) { // all layers are inside one iframe so we need define styles just once clb([{ css: css, html: html, js: js }]); } else { clb([{ html: html, js: js }]); } }; return props; }, 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' } } }); </script> </body> </html>sorry for some reason its not showing all my code,
like this:
props.cssLayersLoader = function (n, clb) { if (n===5) { clb([{ css: css, html: html, js: js }]); } };Thank you! How about this portion of the code below? I think it was made for deep linking not for external linking, so it doesn't work. How do I get the link to actually take you somewhere. It currently just takes me to another page, not the link I specified in the a href section.
var html = [ '<div class="page">', '<a href="http://tonywright-art.com/" class="link go-page" data-page-n="90" style="bottom: 160px; left: 80px; width: 680px; height: 45px;">Return to Tony Wright Art</a>', '</div>' ].join(''), css = [ '.page {', 'position: relative;', 'width: 1024px;', 'height: 1448px;', '}', '.page .link {', 'background-color: white;', 'display: block;', 'position: absolute;', 'opacity: 0.1;', '}', '.page .link:hover {', 'opacity: 0.2;', '}', '.page .link:active {', 'opacity: 0.3;', '}' ].join(''), js = [ 'function init(c, a) {', 'c.find(".page .go-page").on("click", function(e) {', 'e.preventDefault();', 'var page = parseInt(a.$(e.target).attr("data-page-n"));', 'console.log(page);', 'a.scene.ctrl.goToPage(page-1);', '});', 'return {};', '}; init' ].join('');for internal navigation: https://www.youtube.com/watch?v=t_6pISxwtBs
Is any JS needed? Do I need to chain the html, css and js together as above? Thank you for your reply!
This is what I have so far, but when I remove the javascript the links disappear. When I remove the else statement no link appears on any page. So with just the n===1. That doesn't work.
var html = [ '
Here's my new code. I removed prevent default from the javascript section and now the link works, but the n===1 doesn't work. It only works if I add the else and then have the link appear on every page.
It is waiting for 0 page initialization, because it always initializes first:
props.cssLayersLoader = function (n, clb) { if (n===1) { clb([{ html: '<a href="https://3dflipbook.net" target="_blank">https://3dflipbook.net</a>', }]); } else { clb([]); } };