Making a Turn.js book like in example?
Making a Turn.js book like in example?
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.com/#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.com/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
1
You 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.
own-size
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
