title: How to add filp efect to epub pages using Turn.js?
body: <p>I have an .epub file that does not have any effect or animation while user turns between the pages </p>
  
  <p>I use <a href="http://www.turnjs.com/" rel="nofollow noreferrer">Turn.js</a> library for it be it does not work .I can not open it with eBook readers softwares.</p>
  
  <p>Here is my Epub folder Directory </p>
  
  <p><strong>Before</strong> add Turn.js library</p>
  
  <p><a href="https://i.stack.imgur.com/sPH36.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sPH36.png" alt="befor"></a>   </p>
  
  <p><strong>After</strong> add Turn.js library<br>
   <a href="https://i.stack.imgur.com/ssLcC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ssLcC.png" alt="after"></a></p>
  
  <p>And here is my <strong>chap_0001.xhtml</strong> Html code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;head&gt;
      &lt;title&gt;How to Win Every Argument&lt;/title&gt;
      &lt;link href="style/style.css" rel="stylesheet" type="text/css"/&gt;
   &lt;meta name="viewport" content="width = 1050, user-scalable = no" /&gt;&lt;!-- Added--&gt;
   &lt;script type="text/javascript" src="extras/jquery.min.1.7.js"&gt;&lt;/script&gt;&lt;!-- Added --&gt;
   &lt;script type="text/javascript" src="extras/modernizr.2.5.3.min.js"&gt;&lt;/script&gt;&lt;!-- Added--&gt;
    &lt;/head&gt;
    &lt;body dir="auto"&gt;
    &lt;h1 dir="ltr" class="center"&gt;How to Win Every Argument&lt;/h1&gt;&lt;p dir="ltr" class="center bold"&gt;Madsen Piri&lt;/p&gt;
    
   &lt;div class="offset"&gt;
    &lt;div class="flipbook-viewport"&gt;&lt;!-- Added--&gt;
   &lt;div class="container"&gt;&lt;!-- Added--&gt;
    &lt;div class="flipbook"&gt;&lt;!-- Added--&gt;
  
    &lt;div style="width: 100.0%;"&gt;
    &lt;img src="images/img_0001.png" alt="Picture #1"/&gt;
    &lt;/div&gt;
    &lt;span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/&gt;
    &lt;div style="width: 37.238758708043065%;"&gt;
    &lt;img src="images/img_0002.png" alt="Picture #2"/&gt;
    &lt;/div&gt;
    &lt;span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/&gt;
    &lt;div style="width: 45.59848005066498%;"&gt;
    &lt;img src="images/img_0003.png" alt="Picture #3"/&gt;
    &lt;/div&gt;
    
    &lt;!-- rest of pages --&gt;
         &lt;/div&gt; 
     &lt;/div&gt; 
     &lt;/div&gt; 
    &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>And here is my <strong>chap_0001.xhtml</strong> Js code</p>
  
  
  
  <pre><code>&lt;!-- language: lang-js --&gt;
  //Added after using Turn.js library
      function loadApp() {
        // Create the flipbook
        $('.flipbook').turn({
          // Width
          width: 922,
          // Height
          height: 600,
          // Elevation
          elevation: 50,
          // Enable gradients
          gradients: true,
          // Auto center this flipbook
          autoCenter: true
  
        });
      }
  
      // Load the HTML4 version if there's not CSS transform
  
      yepnope({
        test: Modernizr.csstransforms,
        yep: ['lib/turn.js'],
        nope: ['lib/turn.html4.min.js'],
        both: ['style/basic.css'],
        complete: loadApp
      });
  </code></pre>
  
  <p><strong>I only copy library folders and change chap_0001.xhtml file . That's it.</strong></p>
  
  <p>Any help will be appreciated</p>