Page Flip plugin is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5. The primary features of Page Flip Plugin:
- Works on iPad and iPhone.
- Simple, beautiful and powerful API.
- Allows to load pages dynamically through Ajax requests.
- Pure HTML5/CSS3 content.
- Two transition effects.
- Works in old browsers such as IE 8 with turn.html4.js
Live Demo
1. Bible
The Bible
of
2. Magazine
3. Single Magazine
How to Use
1. CSS
Add the css below to your html page
<style type="text/css">
body {
background: #ccc;
}
#book {
width: 800px;
height: 500px;
}
#book .turn-page {
background-color: white;
}
#book .cover {
background: #333;
}
#book .cover h1 {
color: white;
text-align: center;
font-size: 50px;
line-height: 500px;
margin: 0px;
}
#book .loader {
background-image: url(loader.gif);
width: 24px;
height: 24px;
display: block;
position: absolute;
top: 238px;
left: 188px;
}
#book .data {
text-align: center;
font-size: 40px;
color: #999;
line-height: 500px;
}
#controls {
width: 800px;
text-align: center;
margin: 20px 0px;
font: 30px arial;
}
#controls input,
#controls label {
font: 30px arial;
}
#book .odd {
background-image: -webkit-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(left, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(left, #FFF 95%, #ddd 100%);
}
#book .even {
background-image: -webkit-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -moz-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -o-linear-gradient(right, #FFF 95%, #ddd 100%);
background-image: -ms-linear-gradient(right, #FFF 95%, #ddd 100%);
}
#magazine {
width: 1152px;
height: 752px;
}
#magazine .turn-page {
background-color: #ccc;
background-size: 100% 100%;
}
</style>
2. HTML
Create a container where you want to render Page Flip
<div id="book">
<div class="cover">
<h1>The Bible</h1>
</div>
</div>
<div id="controls">
<label for="page-number">Page:</label> <input type="text" size="3" id="page-number"> of <span
id="number-pages"></span>
</div>
<div id="magazine">
<div style="background-image:url(pages/01.jpg);"></div>
<div style="background-image:url(pages/02.jpg);"></div>
<div style="background-image:url(pages/03.jpg);"></div>
<div style="background-image:url(pages/04.jpg);"></div>
<div style="background-image:url(pages/05.jpg);"></div>
<div style="background-image:url(pages/06.jpg);"></div>
</div>
3. Javascript
Load jQuery library together with the Page Flip library into your code
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../turn.min.js"></script>
<script type="text/javascript">
// Sample using dynamic pages with turn.js
var numberOfPages = 1000;
// Adds the pages that the book will need
function addPage(page, book) {
// First check if the page is already in the book
if (!book.turn('hasPage', page)) {
// Create an element for this page
var element = $('<div />', {
'class': 'page ' + ((page % 2 == 0) ? 'odd' : 'even'),
'id': 'page-' + page
}).html('<i class="loader"></i>');
// If not then add the page
book.turn('addPage', element, page);
// Let's assum that the data is comming from the server and the request takes 1s.
setTimeout(function () {
element.html('<div class="data">Data for page ' + page + '</div>');
}, 1000);
}
}
$(window).ready(function () {
$('#book').turn({
acceleration: true,
pages: numberOfPages,
elevation: 50,
gradients: !$.isTouch,
when: {
turning: function (e, page, view) {
// Gets the range of pages that the book needs right now
var range = $(this).turn('range', page);
// Check if each page is within the book
for (page = range[0]; page <= range[1]; page++)
addPage(page, $(this));
},
turned: function (e, page) {
$('#page-number').val(page);
}
}
});
$('#number-pages').html(numberOfPages);
$('#page-number').keydown(function (e) {
if (e.keyCode == 13)
$('#book').turn('page', $('#page-number').val());
});
$('#magazine').turn({
width: 400,
height: 300,
autoCenter: true,
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation: 50,
when: {
turned: function (e, page) {
}
}
});
});
$(window).bind('keydown', function (e) {
if (e.target && e.target.tagName.toLowerCase() != 'input') {
if (e.keyCode == 37) {
$('#book').turn('previous');
$('#magazine').turn('previous');
} else if (e.keyCode == 39) {
$('#book').turn('next');
$('#magazine').turn('next');
}
}
});
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.