|
|
| Line 1: |
Line 1: |
| - | {{:Team:Dundee/Template/header}}
| |
| | <html> | | <html> |
| | <head> | | <head> |
| Line 23: |
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{ |
| - | | + | background-color:#ccc; |
| - | body.hide-overflow {
| + | background-size:100% 100%; |
| - | overflow.Y: hidden;
| + | |
| | } | | } |
| | + | </style> |
| | + | </head> |
| | + | <body> |
| | | | |
| - | /* helpers */
| + | <div id="magazine"> |
| | + | <div> |
| | | | |
| - | .t {
| |
| - | display: table;
| |
| - | width: 100%;
| |
| - | height: 100%;
| |
| - | }
| |
| | | | |
| - | .tc {
| + | <video controls="controls" width=100% height=100% name="Video Name" src="https://static.igem.org/mediawiki/2014/a/ac/Rick.mov"></video> |
| - | padding-top: 10%;
| + | |
| - | display: table-cell;
| + | |
| - | vertical-align: middle;
| + | |
| - | text-align: center;
| + | |
| - | }
| + | |
| | | | |
| - | .rel {
| |
| - | position: relative;
| |
| - | }
| |
| | | | |
| - | /* book */
| |
| - |
| |
| - | .book {
| |
| - |
| |
| - | margin: 0 auto;
| |
| - | width: 70%;
| |
| - | height: 70%;
| |
| - | -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>
| |
| - | </head>
| |
| - | <body>
| |
| - |
| |
| - | <div class="t">
| |
| - | <div class="tc rel">
| |
| - | <div class="book" id="book">
| |
| - | <div class="page"><img src="https://static.igem.org/mediawiki/2014/7/75/Dun_Familyalbum.png" alt="" />
| |
| - | </div>
| |
| - | <div class="page double"><img src="https://static.igem.org/mediawiki/2014/7/7e/Dun_powerRange.png" alt="" />
| |
| | </div> | | </div> |
| - | <div class=" page"><img src="https: //raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" alt="" /></div> | + | <div style=" background-color: blue;"></div> |
| - | <div class=" page"><img src="https: //raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" alt="" /> </div> | + | <div style=" background-color: red;"></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> | | </div> |
| | | | |
| | | | |
| | <script type="text/javascript"> | | <script type="text/javascript"> |
| - | /*
| |
| - | * Turn.js responsive book
| |
| - | */
| |
| | | | |
| - | /*globals window, document, $*/
| + | $(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'); |
| | + | |
| | + | }); |
| | | | |
| - | (function () {
| + | </script> |
| - | '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 overflow
| |
| - | document.body.className = 'hide-overflow';
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | module.init('book');
| |
| - | }());
| |
| - |
| |
| - |
| |
| - | $("#book .double").scissor();
| |
| - | </script>
| |
| | </body> | | </body> |
| | </html> | | </html> |
"
