<div class="t"> <div class="tc rel"> <div class="book" id="book"> <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div> <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" alt="" /></div> <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div> <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /></div> <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" alt="" /></div> <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" alt="" /></div> </div> </div> </div>
html, body { margin: 0; height: 100%; } body { background-color: #333; } body.hide-overflow { overflow: hidden; } /* helpers */ .t { display: table; width: 100%; height: 100%; } .tc { display: table-cell; vertical-align: middle; text-align: center; } .rel { position: relative; } /* book */ .book { margin: 0 auto; width: 90%; height: 90%; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: visible !important; } .book .page { height: 100%; background-color: #fff; } .book .page img { max-width: 100%; height: 100%; }
/* * Turn.js responsive book */ /*globals window, document, $*/ (function () { 'use strict'; var module = { ratio: 0.69, //1.38, init: function (id) { var me = this; // if older browser then don't run javascript if (document.addEventListener) { this.el = document.getElementById(id); this.resize(); this.plugins(); // on window resize, update the plugin size window.addEventListener('resize', function (e) { var size = me.resize(); $(me.el).turn('size', size.width, size.height); }); } }, resize: function () { // reset the width and height to the css defaults this.el.style.width = ''; this.el.style.height = ''; var width = this.el.clientWidth, height = Math.round(width / this.ratio), padded = Math.round(document.body.clientHeight * 0.9); // if the height is too big for the window, constrain it if (height > padded) { height = padded; width = Math.round(height * this.ratio); } // set the width and height matching the aspect ratio this.el.style.width = width + 'px'; this.el.style.height = height + 'px'; return { width: width, height: height }; }, plugins: function () { // run the plugin $(this.el).turn({ display: "single", gradients: true, acceleration: true }); // hide the body overflow document.body.className = 'hide-overflow'; } }; module.init('book'); }());