"TEST JUNK turn.js local"
Bootstrap 3.2.0 Snippet by mrmccormack

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro React

Questions / Comments: