Turn.js responsive book

And fallback for older browsers

by Vishnuprasad ps

HTML

<script src="http://www.turnjs.com/lib/turn.min.js"></script>
<div class="t">
    <div class="tc rel">
        <div class="book" id="book">
            <div class="page">
           <a href="#" class="link1" id="page2">Page 2</a>
				<a href="#" class="link2" id="page4">Page 4</a>
				<a href="#" class="link3" id="page6">Page 6</a>
            <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>

CSS

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

.book .page {
    height: 100%;
}

.book .page img {
    max-width: 100%;
    height: 100%;
}

.link1 {
  position: absolute;
  top: 30%;
    left: 5%;
    display: inline-block;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    text-decoration: none;
    font-family: sans-serif;
}
.link2 {
  position: absolute;
  top: 35%;
    left: 5%;
    display: inline-block;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    text-decoration: none;
    font-family: sans-serif;
}
.link3 {
  position: absolute;
  top: 40%;
    left: 5%;
    display: inline-block;
    background: rgba(0,0,0,0.6);
    color: #fff;
    padding: 2px 5px;
    font-size: 12px;
    text-decoration: none;
    font-family: sans-serif;
}

JavaScript

/*
 * Turn.js responsive book
 */

/*globals window, document, $*/


$("#page2").on("click", function(e){e.preventDefault();$(".book").turn("page", 2);})
	$("#page4").on("click", function(e){e.preventDefault();$(".book").turn("page", 4);})
	$("#page6").on("click", function(e){e.preventDefault();$(".book").turn("page", 6);})

(function () {
    'use strict';

    var module = {
        ratio: 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({
                gradients: true,
                acceleration: true
            });
            // hide the body...