title: Why this implementation of turnjs not work?
body: <p>I'm trying to implement this example locally:</p>
  
  <p>The first is to import:</p>
  
  <p>jquery library and turnjs.</p>
  
  <p><a href="http://www.turnjs.com/" rel="nofollow noreferrer">Turn JS</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="flipbook-viewport"&gt;
     &lt;div class="container"&gt;
  &lt;div class="flipbook"&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/07.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/08.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/09.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/10.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/11.jpg)"&gt;&lt;/div&gt;
    &lt;div style="background-image:url(https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/12.jpg)"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>JavaScript: It seems the error is here, but I have little experience in JavaScript. I do not understand why this happens.</p>
  
  <pre><code>window.addEventListener('resize', resize);
  document.body.addEventListener('touchmove', function(e) {
  e.preventDefault();
    // e.stopPropagation();
  });
  
  function loadApp() {
    console.log('Load App');
    var size = getSize();
    console.log(size);
    // Create the flipbook
    $('.flipbook').turn({
    // Width
    width: size.width,
    // Height
    height: size.height,
  
    // Elevation
    elevation: 50,
  
    // Enable gradients
    gradients: true,
  
    // Auto center this flipbook
    autoCenter: true
  
    });
  }
  
  function getSize() {
    console.log('get size');
    var width = document.body.clientWidth;
    var height = document.body.clientHeight;
  
    return {
      width: width,
      height: height
    }
  }
  
  function resize() {
    console.log('resize event triggered');
  
    var size = getSize();
    console.log(size);
  
    if (size.width &gt; size.height) { // landscape
      $('.flipbook').turn('display', 'double');
    }
    else {
      $('.flipbook').turn('display', 'single');
    }
  
    $('.flipbook').turn('size', size.width, size.height);
  }
  
  // Load App
  loadApp();
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,
  body {
    height: 100%;
    width: 100%;
    min-height: 100%;
    min-width: 100%;
  }
  
  body {
    overflow: hidden;
    background-color: #fcfcfc;
    margin: 0;
    padding: 0;
  }
  
  .flipbook-viewport {
    overflow: hidden;
    width: 100%;
    height: 100%;
  }
  
  .flipbook-viewport .container {
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
  }
  
  .flipbook-viewport .flipbook {
    width: 922px;
    height: 600px;
  }
  
  .flipbook-viewport .page {
    width: 461px;
    height: 600px;
    background-color: white;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  
  .flipbook .page {
    -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -ms-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    -o-box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
   }
  
  .flipbook-viewport .page img {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin: 0;
  }
  
  .flipbook-viewport .shadow {
    -webkit-transition: -webkit-box-shadow 0.5s;
    -moz-transition: -moz-box-shadow 0.5s;
    -o-transition: -webkit-box-shadow 0.5s;
    -ms-transition: -ms-box-shadow 0.5s;
    -webkit-box-shadow: 0 0 20px #ccc;
    -moz-box-shadow: 0 0 20px #ccc;
    -o-box-shadow: 0 0 20px #ccc;
    -ms-box-shadow: 0 0 20px #ccc;
    box-shadow: 0 0 20px #ccc;
  }
  </code></pre>
  
  <p>but not working.</p>
  
  <p>This is console logs:</p>
  
  <p><a href="https://i.stack.imgur.com/hBJ0F.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hBJ0F.png" alt="console error"></a></p>
  
  <p><a href="https://i.stack.imgur.com/6qu4g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6qu4g.png" alt="code error"></a></p>
  
  <p>what should I do?</p>
  
  <p>Thanks!</p>