Streaming live at 10am (PST)

Turn.js not working

Hello everybody,
I’m trying to use turn.js to add a flipbook on this page. It seems like I’ve done everything properly, but it doesn’t work. There’s something I’m missing and I can’t figure out what. Here’s what I did:

In the page settings I went to custom code and inside I added:

<.script src=“https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”><./script>

<.script src="//cdn.jsdelivr.net/turn.js/3/turn.js"><./script>

plus a bunch of CSS inside a <.style> tag.

Then in section before I put

<.script type=“text/javascript”>
(document).ready(function() { ("#flipbook").turn({
width: 400,
height: 300,
autoCenter: true
});
});
<./script>

Then I put an embed component in the page and wrote (copied and pasted from turn.js webpage, just as a test):

<.div id=“flipbook”>
<.div class=“hard”> Turn.js <./div>
<.div class=“hard”><./div>
<.div> Page 1 <./div>
<.div> Page 2 <./div>
<.div> Page 3 <./div>
<.div> Page 4 <./div>
<.div class=“hard”><./div>
<.div class=“hard”><./div>
<./div>

When I publish I can see the text and some sort of grey container (with the wrong size), and by checking the dev console I get this:

jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2 jQuery.Deferred exception: (...).turn is not a function TypeError: (…).turn is not a function
at HTMLDocument. (https://designing-digital-products-for-kids.webflow.io/:78:17)
at e (https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2:30005)
at t (https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2:30307) undefined
S.Deferred.exceptionHook @ jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2
jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2 Uncaught TypeError: $(…).turn is not a function
at HTMLDocument. ((index):78)
at e (jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2)
at t (jquery-3.5.1.min.dc5e7f18c8.js?site=5f840a2fcc81a1119a328590:2)

Here’s is the read-only link to the page:

Can anyone help? Thanks a lot!

Remove jquery (Webflow already load this).

Put the turn.js CDN code before body.

AH! Ok, it’s a progress! But pages won’t turn, I can just see the cover. It’s a step forward though, thanks

image

You also got syntax her:

( document ).ready(function() {

Should be (add $):

$( document ).ready(function() {

Copy Paste

<script src="//cdn.jsdelivr.net/turn.js/3/turn.js"></script>

<script type="text/javascript">
  $( document ).ready(function() {
    $("#flipbook").turn({
      width: 400,
      height: 300,
      autoCenter: true
    });
  });
</script>

that’s odd! I see this
Screenshot 2020-10-16 at 11.19.45

Anyway i am not sure this library works well with webflow jquery version.
The code last update before 9 years ago + You need to add a lot of styles by yourself + What about mobile?

My advice is to use another solution/idea.

it’s supposed to work on mobile, but I’m also considering another solution. Thanks for your help though, much appreciated