I'm currently making a book with turn.js using Jquery of which is going well but I need a little bit of help. You see I'm trying to make a hard-backed journal-type book like the example shown here . My question is, how can I get it so that the pages of the book are smaller than the front and back covers? Also how can I get it so that when I keep turning the pages, the number of pages visibly build up on the other side like in the example?
Can someone please help edit the code of my main page below so that I can get the effect I'm after?
<!doctype html>
<html>
<head>
<script type="text/javascript" src=".7.1.min.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<style type="text/css">
body{
background:#ccc;
}
#magazine{
width:1002px;
height:773px;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="magazine">
<div class="hard">A Book</div>
<div class="hard"></div>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
<div>Page 6</div>
<div>Page 7</div>
<div>Page 8</div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>
</body>
</html>
I'm currently making a book with turn.js using Jquery of which is going well but I need a little bit of help. You see I'm trying to make a hard-backed journal-type book like the example shown here http://www.turnjs./#samples/html5/1. My question is, how can I get it so that the pages of the book are smaller than the front and back covers? Also how can I get it so that when I keep turning the pages, the number of pages visibly build up on the other side like in the example?
Can someone please help edit the code of my main page below so that I can get the effect I'm after?
<!doctype html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery./jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/turn.js"></script>
<style type="text/css">
body{
background:#ccc;
}
#magazine{
width:1002px;
height:773px;
}
#magazine .turn-page{
background-color:#ccc;
background-size:100% 100%;
}
</style>
</head>
<body>
<div id="magazine">
<div class="hard">A Book</div>
<div class="hard"></div>
<div>Page 1</div>
<div>Page 2</div>
<div>Page 3</div>
<div>Page 4</div>
<div>Page 5</div>
<div>Page 6</div>
<div>Page 7</div>
<div>Page 8</div>
<div class="hard"></div>
<div class="hard"></div>
</div>
<script type="text/javascript">
$(window).ready(function() {
$('#magazine').turn({
display: 'double',
acceleration: true,
gradients: !$.isTouch,
elevation:50,
when: {
turned: function(e, page) {
/*console.log('Current view: ', $(this).turn('view'));*/
}
}
});
});
$(window).bind('keydown', function(e){
if (e.keyCode==37)
$('#magazine').turn('previous');
else if (e.keyCode==39)
$('#magazine').turn('next');
});
</script>
</body>
</html>
1 Answer
Reset to default 0You can change the size of the pages by using own-size as a CSS class and defining a custom size for the pages. See this page.