CODEWITHSUNDEEP
javascriptjqueryhtmlepubturnjs
Alireza Bideli
Alireza Bideli

Reputation: 874

How to add filp efect to epub pages using Turn.js?

I have an .epub file that does not have any effect or animation while user turns between the pages

I use Turn.js library for it be it does not work .I can not open it with eBook readers softwares.

Here is my Epub folder Directory

Before add Turn.js library

befor

After add Turn.js library
after

And here is my chap_0001.xhtml Html code

  <head>
    <title>How to Win Every Argument</title>
    <link href="style/style.css" rel="stylesheet" type="text/css"/>
	<meta name="viewport" content="width = 1050, user-scalable = no" /><!-- Added-->
	<script type="text/javascript" src="extras/jquery.min.1.7.js"></script><!-- Added -->
	<script type="text/javascript" src="extras/modernizr.2.5.3.min.js"></script><!-- Added-->
  </head>
  <body dir="auto">
  <h1 dir="ltr" class="center">How to Win Every Argument</h1><p dir="ltr" class="center bold">Madsen Piri</p>
  
 <div class="offset">
  <div class="flipbook-viewport"><!-- Added-->
	<div class="container"><!-- Added-->
		<div class="flipbook"><!-- Added-->

		<div style="width: 100.0%;">
		<img src="images/img_0001.png" alt="Picture #1"/>
		</div>
		<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
		<div style="width: 37.238758708043065%;">
		<img src="images/img_0002.png" alt="Picture #2"/>
		</div>
		<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>
		<div style="width: 45.59848005066498%;">
		<img src="images/img_0003.png" alt="Picture #3"/>
		</div>
		
		<!-- rest of pages -->
	      </div>	
	  </div>	
   </div>	
  </div>

And here is my chap_0001.xhtml Js code

<!-- language: lang-js -->
//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
    });

I only copy library folders and change chap_0001.xhtml file . That's it.

Any help will be appreciated

Upvotes: 3

Views: 1619

Answers (1)

Kalimah
Kalimah

Reputation: 11437

I am not sure what particular issues you had with your script. One main issue is the extra spans you included in your html:

<span xmlns:epub="http://www.idpf.org/2007/ops" id="1" title="1" epub:type="pagebreak"/>
<span xmlns:epub="http://www.idpf.org/2007/ops" id="2" title="2" epub:type="pagebreak"/>

They were considered "pages" and therefor turn.js turned the page to blank span that does not have the same size as other elements.

Anyway, this is a working example with your html: JSFiddle Example

I could not include working code here because turn.js is served over http. I had to copy the entire code and paste into js part which is more than stackoverflow text limit

Upvotes: 1

Related Questions