|
|
| Line 22: |
Line 22: |
| | <style type="text/css"> | | <style type="text/css"> |
| | | | |
| - | html, body {
| + | #magazine{ |
| - | margin: 0;
| + | top: 100px; |
| - | height: 100%;
| + | width:1000px; |
| | + | height:500px; |
| | } | | } |
| - | | + | #magazine .turn-page{ |
| - | body {
| + | background-color:#ccc; |
| - | background-color: #333;
| + | background-size:100% 100%; |
| - | }
| + | |
| - | | + | |
| - | 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%;
| + | |
| | } | | } |
| | </style> | | </style> |
| Line 79: |
Line 35: |
| | <body> | | <body> |
| | | | |
| - | <div class="t"> | + | <div id="magazine"> |
| - | <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> | + | |
| | | | |
| | | | |
| - | <script type="text/javascript"> | + | <video controls="controls" width=100% height=100% name="Video Name" src="https://static.igem.org/mediawiki/2014/a/ac/Rick.mov"></video> |
| - | /* | + | |
| - | * Turn.js responsive book
| + | |
| - | */
| + | |
| | | | |
| - | /*globals window, document, $*/
| |
| | | | |
| - | (function () {
| + | </div> |
| - | 'use strict';
| + | <div style="background-color:blue;"></div> |
| | + | <div style="background-color:red;"></div> |
| | + | </div> |
| | | | |
| - | var module = {
| |
| - | ratio: 1.38,
| |
| - | init: function (id) {
| |
| - | var me = this;
| |
| | | | |
| - | // if older browser then don't run javascript
| + | <script type="text/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 overflow
| + | |
| - | document.body.className = 'hide-overflow';
| + | |
| - | }
| + | |
| - | };
| + | |
| | | | |
| - | module.init('book');
| + | $(window).ready(function() { |
| - | }()); | + | $('#magazine').turn({ |
| | + | display: 'double', |
| | + | acceleration: true, |
| | + | gradients: !$.isTouch, |
| | + | elevation:50, |
| | + | when: { |
| | + | turned: function(e, page) { |
| | + | /*console.log('Current view: ', $(this).turn('view'));*/ |
| | + | } |
| | + | } |
| | + | }); |
| | + | }); |
| | + | |
| | + | |
| | + | $(window).bind('keydown', function(e){ |
| | + | |
| | + | if (e.keyCode==37) |
| | + | $('#magazine').turn('previous'); |
| | + | else if (e.keyCode==39) |
| | + | $('#magazine').turn('next'); |
| | + | |
| | + | }); |
| | | | |
| | </script> | | </script> |
"
