Views
Actions

Main Page

From Turn.js Documentation
(Difference between revisions)
Jump to: navigation, search
m (Let's take a look at how it works)
(Let's take a look at how it works)
 
(29 intermediate revisions by one user not shown)
Line 1: Line 1:
 
Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.  
 
Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.  
  
Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, combine them with hundreds of clever libraries and frameworks made for the web and keep tracking of every page by using services like Google Analytics.
+
Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.
  
 
==Let's take a look at how it works==
 
==Let's take a look at how it works==
Line 8: Line 8:
 
<pre class="xml">
 
<pre class="xml">
 
<div id="flipbook">
 
<div id="flipbook">
<div class="hard"> Turn.js </div>  
+
  <div class="hard"> Turn.js </div>  
<div class="hard"></div>
+
  <div class="hard"></div>
<div> Page 1 </div>
+
  <div> Page 1 </div>
<div> Page 2 </div>
+
  <div> Page 2 </div>
<div> Page 3 </div>
+
  <div> Page 3 </div>
<div> Page 4 </div>
+
  <div> Page 4 </div>
<div class="hard"></div>
+
  <div class="hard"></div>
<div class="hard"></div>
+
  <div class="hard"></div>
 
</div>
 
</div>
 
</pre>
 
</pre>
Line 21: Line 21:
 
<pre class="javascript">
 
<pre class="javascript">
 
$("#flipbook").turn({
 
$("#flipbook").turn({
width: 400,
+
  width: 400,
height: 300,
+
  height: 300,
autoCenter: true
+
  autoCenter: true
 
});
 
});
 
</pre>
 
</pre>
  
[http://www.turnjs.com/samples/basic-flipbook Here is the result]
+
[http://jsfiddle.net/blasten/A9a7E Here's the result on jsFiddle]
  
 
== Turn.js 4th release==
 
== Turn.js 4th release==
This is the current release of turn.js, it has over 10 different performance improvements and more than 20 new features.  The improvements were mainly focused on making the effects more fluent and smoother than any other page flip in the market as well as reducing memory consumption when using the browser' GPU and storing elements in the DOM tree.  It also supports old browsers such as IE8 or IE7 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4 browsers.
+
Turn.js 4th release has over 10 different performance improvements and more than 20 new features.  The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree.  It also supports old browsers such as IE8 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4-based browsers.
  
==Turn==
+
==Flipbook==
  
Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, events and CSS classes available in turn.js 4.0.6 release.
+
Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.
  
 
:{| class="simple"
 
:{| class="simple"
Line 47: Line 47:
 
* [[Option: acceleration|acceleration]]
 
* [[Option: acceleration|acceleration]]
 
* [[Option: autoCenter|autoCenter]]
 
* [[Option: autoCenter|autoCenter]]
 +
* [[Option: direction|direction]]
 
* [[Option: display|display]]
 
* [[Option: display|display]]
* [[Option: display|duration]]
+
* [[Option: duration|duration]]
 
* [[Option: gradients|gradients]]
 
* [[Option: gradients|gradients]]
 
* [[Option: height|height]]
 
* [[Option: height|height]]
* [[Option: inclination|inclination]]
+
* [[Option: elevation|elevation]]
 
* [[Option: page|page]]
 
* [[Option: page|page]]
 
* [[Option: pages|pages]]
 
* [[Option: pages|pages]]
* [[Option: prefix|prefix]]
+
* [[Option: turnCorners|turnCorners]]
 
* [[Option: when|when]]
 
* [[Option: when|when]]
 
* [[Option: width|width]]
 
* [[Option: width|width]]
Line 60: Line 61:
  
 
* [[Property: animating|animating]]
 
* [[Property: animating|animating]]
 +
* [[Property: direction|direction]]
 
* [[Property: display|display]]
 
* [[Property: display|display]]
 
* [[Property: disabled|disabled]]
 
* [[Property: disabled|disabled]]
Line 75: Line 77:
 
* [[Method: center|center]]
 
* [[Method: center|center]]
 
* [[Method: destroy|destroy]]
 
* [[Method: destroy|destroy]]
 +
* [[Method: direction|direction]]
 
* [[Method: display|display]]
 
* [[Method: display|display]]
 
* [[Method: disable|disable]]
 
* [[Method: disable|disable]]
Line 80: Line 83:
 
* [[Method: next|next]]
 
* [[Method: next|next]]
 
* [[Method: is|is]]
 
* [[Method: is|is]]
 +
* [[Method: options|options]]
 
* [[Method: page|page]]
 
* [[Method: page|page]]
 
* [[Method: pages|pages]]
 
* [[Method: pages|pages]]
Line 128: Line 132:
 
|-
 
|-
 
| valign="top" |
 
| valign="top" |
 +
* [[Option: easeFunction|easeFunction]]
 +
* [[Zoom Option: duration|duration]]
 
* [[Option: max|max]]
 
* [[Option: max|max]]
 
* [[Option: flipbook|flipbook]]
 
* [[Option: flipbook|flipbook]]
 
* [[Zoom Option: when|when]]
 
* [[Zoom Option: when|when]]
 +
 
| valign="top" |
 
| valign="top" |
  
Line 138: Line 145:
 
| valign="top"  |
 
| valign="top"  |
  
* [[Zoom Method: destroy|destroy]]
 
 
* [[Method: zoomIn|zoomIn]]
 
* [[Method: zoomIn|zoomIn]]
 
* [[Method: zoomOut|zoomOut]]
 
* [[Method: zoomOut|zoomOut]]
Line 144: Line 150:
  
 
| valign="top"  |
 
| valign="top"  |
 
+
* [[Event: change|change]]
 
* [[Event: doubleTap|doubleTap]]
 
* [[Event: doubleTap|doubleTap]]
 
* [[Event: resize|resize]]
 
* [[Event: resize|resize]]
 +
* [[Event: swipeLeft|swipeLeft]]
 +
* [[Event: swipeRight|swipeRight]]
 +
* [[Event: tap|tap]]
 
* [[Event: zoomIn|zoomIn]]
 
* [[Event: zoomIn|zoomIn]]
 
* [[Event: zoomOut|zoomOut]]
 
* [[Event: zoomOut|zoomOut]]
* [[Event: swipeLeft|swipeLeft]]
 
* [[Event: swipeRight|swipeRight]]
 
 
 
|}
 
|}
  

Latest revision as of 23:20, 25 November 2012

Turn.js is a library that will make your content look like a real book or magazine with just HTML content. It uses HTML5 and CSS3 to perform the effects, reason why it works nicely on touch devices such as iOS devices (iPad, iPhone, iPod) and Android devices.

Turn.js takes all the advantages of having real HTML content over flash content. Besides the feeling of native content (selectable content, no third-party contextual menus), it's possible to add advertisement codes, HTML5 videos, tooltips, images, maps, forms, keep tracking of every page and combine them with hundreds of clever libraries made for the Web.

[edit] Let's take a look at how it works

1. We create the HTML

<div id="flipbook">
  <div class="hard"> Turn.js </div> 
  <div class="hard"></div>
  <div> Page 1 </div>
  <div> Page 2 </div>
  <div> Page 3 </div>
  <div> Page 4 </div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

2. Then the JavaScript part

$("#flipbook").turn({
  width: 400,
  height: 300,
  autoCenter: true
});

Here's the result on jsFiddle

[edit] Turn.js 4th release

Turn.js 4th release has over 10 different performance improvements and more than 20 new features. The improvements were mainly focused on making the effects much more fluent and smoother as well as reducing memory consumption when using the browser's GPU and storing elements in the DOM tree. It also supports old browsers such as IE8 by adding a new file called turn.html4.js, which has the exact same API (methods, properties) but it deals with the effects in a different way on HTML4-based browsers.

[edit] Flipbook

Turn is the built-in jQuery plugin that comes with the turn.js development kit, which allows you to create flipbooks. These are the options, properties, methods, events and CSS classes available in turn.js 4.0.9 release.

Options Properties Methods Events CSS Classes


[edit] Zoom Viewport

To implement the new zoom function, a new component is available since turn.js 4.0.2 to define the viewport of the pages when zoomed in. There's an article about how to add zoom to turn.js.

Options Properties Methods Events



[edit] Scissors

Scissors is literally a scissor that cuts a page in two parts, so that you can have double pages made entirely in HTML5 and split them into two pages.

Read more about Scissor