<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 ---------->
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="xxxhttp://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>
</head>
<body>
<div class="flipbook-viewport">
<div class="container">
<p>
<a href="http://bootsnipp.com/iframe/3xPjo" target="_blank">View Full Screen </a> <i>(Req'd to test on mobile device)</i>
</p>
<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>
<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;
}
