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

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

Related: See More


Questions / Comments: