How to use Turn.js from github

Has anyone used the turn.js from github?

I am looking to add a menu book to my site and want to use this but I have zero idea on what to do

http://www.turnjs.com/

I want to have it on my Menu Page

https://preview.webflow.com/preview/element-chef-services?preview=5879d70a6f12d799b5b5355801c9982b

You must know a little JS. First you should know how to use this plugin outside Webflow (The main part for this to work). Read and learn the docs.

Outline steps, Like most jquery plugins:

  1. call the assets (css in the head + Js before body - use CDNs’ or copy-paste the code for very small scripts)
    Turn.js
  1. Add the plugin markup (Styles and attributes)

  2. Instilize the plugin $("#flipbook").turn({ …this code is very simple - read her about id/class selectors:
    jQuery #id Selector

Add ID on webflow:

Node: This plugin only work on the publish site (Not in the editor and/or editor preview mode).

Remember - webflow already uses jquery (Dont load this asset) - only add this code wrapper

$(document).ready(function() {
/* your code her */
$("#flipbook") ..rest of the code

});

Start from this answer- than ask more specific Q (Why? this is more a tutorial issue or job aboard).

Also you find a lot of examples on google (webdlow with some jquery plugin - open this examples with the editor and learn the consept)
One from many (again google it): https://webflow.com/website/jquery-countdown

1 Like

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.