|
|
| Line 1: |
Line 1: |
| - |
| |
| | <html> | | <html> |
| | <head> | | <head> |
| - | <meta name="viewport" content="width = 1050, user-scalable = no" /> | + | <link href="https://2013.igem.org/Team:Calgary/StyleSheets/Reset?action=raw&ctype=text/css" rel="stylesheet"> |
| - | <script type="text/javascript" src="http://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> | | </head> |
| | + | |
| | <body> | | <body> |
| | | | |
| | + | </body> |
| | | | |
| - |
| |
| - |
| |
| - | <div class="flipbook-viewport">
| |
| - | <div class="container" style="position:absolute;width: 50%;
| |
| - | margin: 0px auto;">
| |
| - | <div class="flipbook" style="position:relative">
| |
| - | <div style="background-image:url(https://static.igem.org/mediawiki/2014/3/37/VGEM_44.jpg)"></div>
| |
| - | <div style="background-image:url(https://static.igem.org/mediawiki/2014/f/f6/VGEM_39.jpg)"></div>
| |
| - | <div style="background-image:url(https://static.igem.org/mediawiki/2014/e/e8/VGEM_31.jpg)"></div>
| |
| - | <div style="background-image:url(pages/155.jpg)"></div>
| |
| - | <div style="background-image:url(pages/156.jpg)"></div>
| |
| - | </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
| |
| - |
| |
| - |
| |
| - | $(document).keydown(function(e){
| |
| - |
| |
| - | var previous = 37, next = 39, esc = 27;
| |
| - |
| |
| - | switch (e.keyCode) {
| |
| - | case previous:
| |
| - |
| |
| - | // left arrow
| |
| - | $('.flipbook').turn('previous');
| |
| - | e.preventDefault();
| |
| - |
| |
| - | break;
| |
| - | case next:
| |
| - |
| |
| - | //right arrow
| |
| - | $('.flipbook').turn('next');
| |
| - | e.preventDefault();
| |
| - |
| |
| - | break;
| |
| - | case esc:
| |
| - |
| |
| - | $('.flipbook-viewport').zoom('zoomOut');
| |
| - | e.preventDefault();
| |
| - |
| |
| - | break;
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | yepnope({
| |
| - | test : Modernizr.csstransforms,
| |
| - | yep: ['http://www.thebalancingact.com/assets/js/turn/lib/turn.js'],
| |
| - | nope: ['http://www.thebalancingact.com/assets/js/turn/lib/turn.html4.min.js'],
| |
| - | both: ['http://www.thebalancingact.com/assets/css/turn/basic/basic.css'],
| |
| - | complete: loadApp
| |
| - | });
| |
| - |
| |
| - | </script>
| |
| - |
| |
| - | </body>
| |
| | </html> | | </html> |
"
