Flipbook Jquery plugin

Hello everyone,

I just bought a jquery plugin for a 3d flipbook for an online magazine, it’s a sort of turn.js plugin, that I want to install on my Webflow website. The 3d flipbook plug-in consists out a lot of HTML files starting with <!DOCTYPE> and maps with js and css files. I understand that you cannot upload css or js files in Webflow, so I tried to upload everything on Github and make embeddable links with www.combinatronics.com.

Where should you enter the doctype HTML code? Do you put the code in the HTML element or in the head or body of the page?

I am a nerdy woman, but not nerdy enough to fix this. I’ve been trying for weeks. Please help me out:) Thanks so much.

This is the HTML code:

<!DOCTYPE HTML>
<HTML>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<link rel="stylesheet" type="text/css" href="css/flipbook.style.css">
<link rel="stylesheet" type="text/css" href="css/font-awesome.css">

<script src="js/flipbook.min.js"></script>

<script type="text/javascript">

    $(document).ready(function () {
        $("#container").flipBook({
            pdfUrl:'pdf/book2.pdf'
            ],
		    skin:"dark"
        })

    })
	
</script>

</head>

<body>
<div id="container"/>
</body>

</html>

Webflow already provides a full html structure for all pages. You can add custom code to both the head and before body close. jQuery is already loaded for you so you would not load it again. Code that requires jQuery should be loaded in the before body close custom code area.

1 Like

Thank you very much for your quick reply. Do you know if it is possible to add <!doctype html> in the before body tag?

As I said, Webflow already is providing a HTML document. The only elements you need to add to a page would be the <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script> added before the body close area, your updated CSS link tags in the head area, the flipbook.min.js in the before body close area, then the script added as the last element in the before body close area.

If your confused, take a look at the custom code content in the University. If you need further help I would suggest one on one assistance (freelance help).