Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 371b66f

Browse files
blastenblasten
committed
r3
1 parent 9a978a2 commit 371b66f

File tree

6 files changed

+1502
-768
lines changed

6 files changed

+1502
-768
lines changed

‎demos/bible/index.html

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
5+
<script type="text/javascript" src="../../../turn.min.js"></script>
6+
7+
<style type="text/css">
8+
body{
9+
background:#ccc;
10+
}
11+
#bible{
12+
width:800px;
13+
height:500px;
14+
}
15+
#bible .turn-page{
16+
background-color:white;
17+
}
18+
#bible .cover{
19+
background:#333;
20+
}
21+
22+
#bible .cover h1{
23+
color:white;
24+
text-align:center;
25+
font-size:50px;
26+
line-height:500px;
27+
}
28+
29+
#bible .cover p{
30+
color:white;
31+
text-align:center;
32+
font-size:15px;
33+
margin:0px;
34+
color:#999;
35+
}
36+
37+
#bible .loader{
38+
background-image:url(loader.gif);
39+
width:24px;
40+
height:24px;
41+
display:block;
42+
position:absolute;
43+
top:238px;
44+
left:188px;
45+
}
46+
47+
#bible .data{
48+
text-align:center;
49+
font-size:40px;
50+
color:#999;
51+
line-height:500px;
52+
}
53+
54+
#controls{
55+
width:800px;
56+
text-align:center;
57+
margin:20px 0px;
58+
}
59+
#controls input, #controls label{
60+
font:30px arial;
61+
}
62+
</style>
63+
</head>
64+
<body>
65+
66+
<div id="bible">
67+
<div class="cover"><h1>The Bible</h1></div>
68+
</div>
69+
70+
<div id="controls">
71+
<label for="page-number">Page:</label> <input type="text" size="3" id="page-number">
72+
</div>
73+
74+
<script type="text/javascript">
75+
76+
// Sample using dynamic pages with turn.js
77+
78+
79+
// Adds the pages that the book will need
80+
function addPage(page, book) {
81+
82+
// First check if the page is already in the book
83+
if (!book.turn('hasPage', page)) {
84+
// If not then add the page
85+
var newPage = $('<div />', {'class': 'page', 'id': 'page-'+page}).html('<i class="loader"></i>');
86+
book.turn('addPage', newPage, page);
87+
// Let's assum that the data is comming from the server and the request takes 1s.
88+
setTimeout(function(){
89+
newPage.html('<div class="data">Data for page '+page+'</div>');
90+
}, 1000);
91+
}
92+
}
93+
94+
95+
$('#bible').turn({acceleration: true,
96+
pages: 1000, // How many pages does this book have?
97+
elevation:50,
98+
gradients: !$.isTouch,
99+
when: {
100+
turning: function(e, page, view) {
101+
102+
// Gets the range of pages that the book needs right now
103+
var range = $(this).turn('range', page);
104+
105+
// Check if each page is within the book
106+
for (page = range[0]; page<=range[1]; page++)
107+
addPage(page, $(this));
108+
109+
},
110+
111+
turned: function(e, page) {
112+
$('#page-number').val(page);
113+
}
114+
}
115+
});
116+
117+
$('#page-number').keydown(function(e){
118+
119+
if (e.keyCode==13)
120+
$('#bible').turn('page', $('#page-number').val());
121+
122+
});
123+
124+
$(window).bind('keydown', function(e){
125+
126+
if (e.keyCode==37)
127+
$('#bible').turn('previous');
128+
else if (e.keyCode==39)
129+
$('#bible').turn('next');
130+
131+
});
132+
133+
134+
135+
136+
</script>
137+
138+
139+
140+
</body>
141+
</html>

‎demos/bible/loader.gif

2.49 KB
Loading

‎demos/magazine/index.html

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,15 @@
22
<html>
33
<head>
44
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
5-
<script type="text/javascript" src="../../turn.min.js"></script>
5+
<script type="text/javascript" src="../../../turn.min.js"></script>
66

77
<style type="text/css">
88
body{
99
background:#ccc;
1010
}
1111
#magazine{
12+
width:1152px;
13+
height:752px;
1214
}
1315
#magazine .turn-page{
1416
background-color:#ccc;
@@ -29,15 +31,28 @@
2931

3032

3133
<script type="text/javascript">
32-
33-
$('#magazine').bind('turned', function(e, page) {
34-
35-
console.log('Current view: ', $('#magazine').turn('view'));
36-
37-
})
38-
39-
$('#magazine').turn({width: 1152, height: 752, acceleration: true, shadows: !$.isTouch});
4034

35+
$('#magazine').turn({
36+
display: 'double',
37+
acceleration: true,
38+
gradients: !$.isTouch,
39+
elevation:50,
40+
when: {
41+
turned: function(e, page) {
42+
console.log('Current view: ', $(this).turn('view'));
43+
}
44+
}
45+
});
46+
47+
48+
$(window).bind('keydown', function(e){
49+
50+
if (e.keyCode==37)
51+
$('#magazine').turn('previous');
52+
else if (e.keyCode==39)
53+
$('#magazine').turn('next');
54+
55+
});
4156

4257
</script>
4358

‎readme.md

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
turn.js
22
=========
33

4-
### The awesome paper-like effect made for HTML5
4+
### Make a flip book with HTML5
55

6-
Turn.js is a plugin for jQuery that adds a beautiful transition similar
7-
to real pages in a book or magazine. It works in all modern browsers including
8-
touch devices.
6+
Turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine. It works in all modern browsers including touch devices
97

10-
11-
#### Example
8+
#### Usage
129

1310
**CSS code:**
1411
<pre>
12+
#magazine{
13+
width: 800px;
14+
height: 400px;
15+
}
1516
#magazine .turn-page{
1617
background-color:#ccc;
1718
}
@@ -28,7 +29,7 @@ touch devices.
2829

2930
**JavaScript code:**
3031
<pre>
31-
$('#magazine').turn({width:800, height: 400, page: 1, shadows: true, acceleration: true});
32+
$('#magazine').turn({gradients: true, acceleration: true});
3233
</pre>
3334

3435
#### Requeriments

0 commit comments

Comments
 (0)