<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<script type="text/javascript" src="???http://www.turnjs.com/extras/jquery.min.1.7.js"></script>
<script type="text/javascript" src="http://www.turnjs.com/extras/modernizr.2.5.3.min.js"></script>
<div class="container">
<div class="row">
<h2>Make Twitter Bootstrap flip book with HTML5 <small>"turn.js" by: Emmanuel García</small></h2>
<p>
Turn.js 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.
<br>
Works on most browsers and devices
Simple and clean API
Lightweight, 10K
</p><hr>
<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>
<hr>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(http://www.turnjs.com/pics/book1.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book2.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book3.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book4.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book5.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book6.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book7.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book8.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book9.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book10.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book11.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book12.jpg)"></div>
</div>
</div>
</div>
></div>
<div style="background-image:url(http://www.turnjs.com/pics/book2.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book3.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book4.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book5.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book6.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book7.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book8.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book9.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book10.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book11.jpg)"></div>
<div style="background-image:url(http://www.turnjs.com/pics/book12.jpg)"></div>
</div>
</div>
</div>
</div>
</div>
<img src="http://i.imgur.com/W7M46bi.png" alt="">
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
// Width
width:922,
// Height
height:600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
}
// Load the HTML4 version if there's not CSS transform
yepnope({
test : Modernizr.csstransforms,
yep: ['http://www.turnjs.com/lib/turn.min.js'],
nope: ['http://www.turnjs.com/lib/turn.html4.min.js'],
both: ['http://www.turnjs.com/css/basic.css'],
complete: loadApp
});
</script>
/* Basic sample */
body{
overflow:hidden;
background-color:#fcfcfc;
margin:0;
padding:0;
}
.flipbook-viewport{
overflow:hidden;
width:100%;
height:100%;
}
.flipbook-viewport .container{
position:absolute;
top:50%;
left:50%;
margin:auto;
}
.flipbook-viewport .flipbook{
width:922px;
height:600px;
left:-461px;
top:-300px;
}
.flipbook-viewport .page{
width:461px;
height:600px;
background-color:white;
background-repeat:no-repeat;
background-size:100% 100%;
}
.flipbook .page{
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.2);
-ms-box-shadow:0 0 20px rgba(0,0,0,0.2);
-o-box-shadow:0 0 20px rgba(0,0,0,0.2);
box-shadow:0 0 20px rgba(0,0,0,0.2);
}
.flipbook-viewport .page img{
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin:0;
}
.flipbook-viewport .shadow{
-webkit-transition: -webkit-box-shadow 0.5s;
-moz-transition: -moz-box-shadow 0.5s;
-o-transition: -webkit-box-shadow 0.5s;
-ms-transition: -ms-box-shadow 0.5s;
-webkit-box-shadow:0 0 20px #ccc;
-moz-box-shadow:0 0 20px #ccc;
-o-box-shadow:0 0 20px #ccc;
-ms-box-shadow:0 0 20px #ccc;
box-shadow:0 0 20px #ccc;
}
