Team:Dundee/famAlbum

From 2014.igem.org

(Difference between revisions)
 
(77 intermediate revisions not shown)
Line 1: Line 1:
 +
{{:Team:Dundee/Template/header}}
 +
<html>
<html>
<head>
<head>
Line 11: Line 13:
   <link href="https://2014.igem.org/Team:Dundee/stylesheet?action=raw&ctype=text/css" rel="stylesheet">
   <link href="https://2014.igem.org/Team:Dundee/stylesheet?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="https://2014.igem.org/Team:Dundee/bootstrap?action=raw&ctype=text/css" rel="stylesheet">
-
 
 
-
 
-
<!-- jQuery -->
 
-
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>
 
-
   
 
-
<!-- Turn js -->
 
-
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>
 
<style type="text/css">
<style type="text/css">
-
html, body {
+
.jumbotron{
-
     margin: 0;
+
  height: 300px;
-
     height: 100%;
+
  background: green;
-
}
+
  color: white;
 +
 +
}   
 +
#btnRow{
 +
     padding-top: 30px;  
 +
     padding-bottom: 30px;
 +
}  
-
body {
+
.toLesson{
-
 
+
    background: green;
 +
    color: white;
}
}
-
body.hide-overflow {
+
.btn-group > a{
-
    overflow: hidden;
+
color: #ffffff;
}
}
-
 
+
.toClass{
-
/* helpers */
+
    background: #97c3c3;
-
 
+
-
.t {
+
-
    display: table;
+
-
    width: 100%;
+
-
    height: 100%;
+
}
}
-
.tc {
+
#magazine{
-
    display: table-cell;
+
top: 100px;
-
    vertical-align: middle;
+
width:1000px;
-
    text-align: center;
+
height:500px;
}
}
-
 
+
#magazine .turn-page{
-
.rel {
+
background-color:#ccc;
-
    position: relative;
+
background-size:100% 100%;
}
}
-
/* book */
+
.page{
-
 
+
border: solid;
-
.book {
+
border-width: 1px;
-
    top: 10%;
+
-
    margin: 0 auto;
+
-
    width: 70%;
+
-
    height: 40%;
+
-
    -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 {
+
.page > img{
-
    height: 100%;
+
height: 100%;
 +
width: 100%;
}
}
-
.book .page img {
 
-
    max-width: 100%;
 
-
    height: 100%;
 
-
}
 
</style>
</style>
</head>
</head>
<body>
<body>
-
<div class="t">
+
<div class="container">
-
     <div class="tc rel">
+
     <div class="jumbotron">
-
        <div class="book" id="book">
+
              <h1>Family Album</h2>
-
            <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" alt="" /></div>
+
             <p class="lead">Ahhhh the Memories</p>
-
             <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>
 +
 +
<div class="row">
 +
<div class="col-12">
 +
<p>
 +
We invite you to look through our family album, where we share our life’s journey with you from the beginning.
 +
</p>
 +
</div>
</div>
</div>
-
<script type="text/javascript">
+
<div id="magazine">
-
/*
+
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/7/75/Dun_Familyalbum.png" alt=""></div>
-
* Turn.js responsive book
+
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/7/7e/Dun_powerRange.png" alt=""></div>
-
*/
+
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/7/79/Dun_tele.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/e/e0/Dun_fj_selfies.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/6/6c/Dun_davita.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/5/53/Dun_jen_look.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/6/67/Dun_bDay_into.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/6/63/Dun_bDay_gill.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/a/a1/Dun_bDay_gill2.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/8/8e/Dun_bDay_gill3.png" alt=""></div>
 +
        <div class="page"><img src="https://static.igem.org/mediawiki/2014/8/88/Dun_jess_bday.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/3f/Dun_Slide12.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/5/59/Dun_Slide13.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/2/29/Dun_Slide14.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/34/Dun_Slide15.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/7/7d/Dun_Slide16.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/f7/Dun_Slide17.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/35/Dun_Slide18.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/2/27/Dun_Slide19.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/4/42/Dun_Slide20.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/e/ed/Dun_Slide21.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/2/2f/Dun_Slide22.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/ff/Dun_Slide23.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/c/c4/Dun_Slide24.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/c/c2/Dun_Slide25.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/2/24/Dun_Slide26.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/f1/Dun_Slide27.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/5/5e/Dun_Slide28.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/1/14/Dun_Slide29.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/e/ec/Dun_Slide30.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/6/6f/Dun_Slide31.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/0/01/Dun_Slide32.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/b/b5/Dun_Slide33.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/c/c9/Dun_Slide34.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/c/c9/Dun_Slide35.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/f1/Dun_Slide36.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/a/a9/Dun_Slide37.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/a/ab/Dun_Slide38.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/6/68/Dun_Slide39.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/2/22/Dun_Slide40.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/e/eb/Dun_Slide41.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/0/07/Dun_Slide42.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/f1/Dun_Slide43.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/39/Dun_Slide44.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/f9/Dun_Slide45.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/9/94/Dun_Slide46.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/e/e9/Dun_Slide47.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/1/13/Dun_Slide48.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/a/ab/Dun_Slide49.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/f/f5/Dun_Slide50.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/3a/Dun_Slide51.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/d/df/Dun_Slide52.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/0/04/Dun_Slide53.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/31/Dun_Slide54.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/6/6a/Dun_Slide55.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/e/e7/Dun_Slide56.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/c/c4/Dun_Slide57.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/3d/Dun_Slide58.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/d/d8/Dun_Slide59.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/4/42/Dun_Slide60.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/d/d0/Slide61.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/a/a2/Slide62.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/0/03/Slide63.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/b/b9/Slide64.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/5/53/Slide65.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/8/8d/Slide66.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/c/c4/Slide67.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/7/73/Slide68.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/d/d6/Slide69.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/7/74/Slide70.PNG" alt=""></div>
 +
<div class="page"><img src="https://static.igem.org/mediawiki/2014/3/37/Slide71.PNG" alt=""></div>
 +
</div>
-
/*globals window, document, $*/
+
<div class="row">
 +
<div class="col-12">
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
<br/>
 +
</div>
 +
</div>
 +
    <div class="row" id="btnRow">
 +
      <div class="btn-group btn-group-justified">
 +
  <div class="btn-group">
 +
<a class="btn btn-default toClass" id="lastPage">Previous Page</a> 
 +
  </div>
 +
  <div class="btn-group">
 +
  </div>
 +
  <div class="btn-group">
 +
    <a class="btn btn-default toClass" id="nextPage">Next Page</a>
 +
  </div>
 +
</div>
-
(function () {
+
<div class="row">
-
    'use strict';
+
<div class="col-12">
 +
<hr>
 +
</div>
 +
</div>
-
    var module = {
+
</div>
-
        ratio: 1.38,
+
</div>
-
        init: function (id) {
+
-
            var me = this;
+
-
            // if older browser then don't run javascript
+
    <div class="row" id="btnRow">
-
            if (document.addEventListener) {
+
      <div class="btn-group btn-group-justified">
-
                this.el = document.getElementById(id);
+
  <div class="btn-group">
-
                this.resize();
+
<a href="Notebook" class="btn btn-default toLesson">Previous Book: Notebook</a> 
-
                this.plugins();
+
  </div>
 +
  <div class="btn-group">
 +
<a href="https://2014.igem.org/Team:Dundee/inside/library" class="btn btn-default toClass">Back to Library</a>
 +
  </div>
 +
  <div class="btn-group">
 +
  </div>
 +
</div>
 +
    </div> 
-
                // on window resize, update the plugin size
+
<script type="text/javascript">
-
                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,
+
$(window).ready(function() {
-
                height = Math.round(width / this.ratio),
+
$('#magazine').turn({
-
                padded = Math.round(document.body.clientHeight * 0.9);
+
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');
 +
 +
});
-
            // if the height is too big for the window, constrain it
+
$( "#lastPage" ).click(function() {
-
            if (height > padded) {
+
  $('#magazine').turn('previous');
-
                height = padded;
+
});
-
                width = Math.round(height * this.ratio);
+
-
            }
+
-
            // set the width and height matching the aspect ratio
+
$( "#nextPage" ).click(function() {
-
            this.el.style.width = width + 'px';
+
  $('#magazine').turn('next');
-
            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');
+
-
}());
+
 +
        $( "#info" ).click( function() {
 +
        $('#welcomeNote').appendTo("body");
 +
  $("#welcomeNote").modal();
 +
});
</script>
</script>
 +
<!-- jQuery -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/jquery-js?action=raw&ctype=text/javascript"></script>
 +
   
 +
<!-- Bootstrap -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/bootstrap-js?action=raw&ctype=text/javascript"></script>
 +
<!-- Turn js -->
 +
<script src="https://2014.igem.org/Team:Dundee/js/turn-js?action=raw&ctype=text/javascript"></script>
</body>
</body>
</html>
</html>
 +
{{:Team:Dundee/Template/welcomeNoteLibrary}}

Latest revision as of 22:42, 17 October 2014

Dundee 2014

Dundee 2014

Dundee 2014 Team

Family Album

Ahhhh the Memories

We invite you to look through our family album, where we share our life’s journey with you from the beginning.