Turn.js not working

Design help Custom code
1

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:
https://preview.webflow.com/preview/designing-digital-products-for-kids?utm_medium=preview_link&utm_source=dashboard&utm_content=designing-digital-products-for-kids&preview=d81498887568926ac51608fa2af6ea61&mode=preview

Can anyone help? Thanks a lot!

2

Remove jquery (Webflow already load this).

Put the turn.js CDN code before body.

image
image677×848 57.3 KB

3

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

4

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>
5

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

6

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?

http://www.turnjs.com/docs/Changelog

My advice is to use another solution/idea.

7

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

8

Hey everyone ,
I am trying to use turn.js library in my reactjs code but unable to use it getting this error Can someone help me with the same please .

Uncaught TypeError: jquery__WEBPACK_IMPORTED_MODULE_1___default(…)(…).turn is not a function
at HTMLDocument. (Flipbook.jsx:10:1)
at mightThrow (jquery.js:3489:1)