Team:Dundee/famAlbum

From 2014.igem.org

(Difference between revisions)
Line 12: Line 12:
   <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
   <link href="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
    
    
-
<link href="//vjs.zencdn.net/4.9/video-js.css" rel="stylesheet">
+
 
-
<script src="//vjs.zencdn.net/4.9/video.js"></script>
+
<!-- jQuery -->
<!-- jQuery -->
Line 23: Line 22:
<style type="text/css">
<style type="text/css">
-
#magazine{
+
html, body {
-
top: 100px;
+
    margin: 0;
-
width:700px;
+
    height: 100%;
-
height:500px;
+
}
}
-
#magazine .turn-page{
+
 
-
background-color:#ccc;
+
body {
-
background-size:100% 100%;
+
    background-color: #333;
}
}
-
div > img{
+
body.hide-overflow {
-
width: 100%;
+
    overflow: hidden;
-
height: 100%;
+
}
 +
 
 +
/* 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: 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>
</style>
Line 41: Line 79:
<body>
<body>
-
<div id="magazine">
+
<div class="t">
-
<div>
+
    <div class="tc rel">
-
 
+
        <div class="book" id="book">
-
        <img src="https://static.igem.org/mediawiki/2014/7/75/Dun_Familyalbum.png" alt="" class="detail">
+
            <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>
+
            <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, $*/
 +
 +
(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 overflow
 +
            document.body.className = 'hide-overflow';
 +
        }
 +
    };
-
$(window).ready(function() {
+
    module.init('book');
-
$('#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>

Revision as of 20:57, 14 October 2014

Dundee 2014 Team

Retrieved from "http://2014.igem.org/Team:Dundee/famAlbum"