Creating a flipbook using javascript library 'turn.js' and html

Question

I'm attempting to create a flipbook using the turn.js library. Below is the code that I am using, however it doesn't seem to work. It is currently operating correctly on jsfiddle as shown here [text] http://jsfiddle.net/xd7sh59p/

Where am I going wrong?



<!DOCTYPE html>
<html>
<head>

</head>
<body>


<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>


<script type="text/javascript">

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

</script>


</body>
</html>   ```

Answer 1

Read code comments

 body{ overflow:hidden; } #flipbook{ width:400px; height:300px; } #flipbook .page{ width:400px; height:300px; background-color:white; line-height:300px; font-size:20px; text-align:center; } #flipbook .page-wrapper{ -webkit-perspective:2000px; -moz-perspective:2000px; -ms-perspective:2000px; -o-perspective:2000px; perspective:2000px; } #flipbook .hard{ background:#ccc !important; color:#333; -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; -o-box-shadow:inset 0 0 5px #666; -ms-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; font-weight:bold; } #flipbook .odd{ background:-webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA)); background-image:-webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:-o-linear-gradient(right, #FFF 95%, #C4C4C4 100%); background-image:linear-gradient(right, #FFF 95%, #C4C4C4 100%); -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; -o-box-shadow:inset 0 0 5px #666; -ms-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; } #flipbook .even{ background:-webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada)); background-image:-webkit-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-moz-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-ms-linear-gradient(left, #fff 95%, #dadada 100%); background-image:-o-linear-gradient(left, #fff 95%, #dadada 100%); background-image:linear-gradient(left, #fff 95%, #dadada 100%); -webkit-box-shadow:inset 0 0 5px #666; -moz-box-shadow:inset 0 0 5px #666; -o-box-shadow:inset 0 0 5px #666; -ms-box-shadow:inset 0 0 5px #666; box-shadow:inset 0 0 5px #666; }

 <!DOCTYPE html> <html> <head> </head> <body> <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> <!-- Turn.js depends on jQuery library, so load it first --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Then load Turn.js library from CDN [it will not work if you load library directly from turn.js website] --> <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/3/turn.min.js"></script> <!-- Finally initiate Turn.js --> <script type="text/javascript"> $("#flipbook").turn({ width: 400, height: 300, autoCenter: true }); </script> </body> </html>

Creating a flipbook using javascript library 'turn.js' and html

Question

1 answers

solution1
0 2020-11-12 13:44:30

Creating a flipbook using javascript library 'turn.js' and html

Question

1 answers

solution1 0 2020-11-12 13:44:30

solution1
0 2020-11-12 13:44:30