Team:UNIK Copenhagen
From 2013.igem.org
SigneKarlsen (Talk | contribs) |
SigneKarlsen (Talk | contribs) |
||
(101 intermediate revisions not shown) | |||
Line 2: | Line 2: | ||
</body> | </body> | ||
<head> | <head> | ||
- | <link rel="image_src" href="https://static.igem.org/mediawiki/2013/ | + | <link rel="image_src" href="https://static.igem.org/mediawiki/2013/c/c3/UNIK_Copenhagen_Facebook_Thumbnail.jpg" /> |
</head> | </head> | ||
</html> | </html> | ||
Line 11: | Line 11: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | /*---------------------------------------------*/ | ||
+ | /* Fonts */ | ||
+ | /*---------------------------------------------*/ | ||
h3{ | h3{ | ||
- | font: bold | + | font: bold 28px Helvetica; |
color: white; | color: white; | ||
border: none; | border: none; | ||
Line 28: | Line 31: | ||
font: 22px Helvetica; | font: 22px Helvetica; | ||
} | } | ||
+ | /*---------------------------------------------*/ | ||
+ | /* Set up of content */ | ||
+ | /*---------------------------------------------*/ | ||
.the_content{ | .the_content{ | ||
max-width: 960px; | max-width: 960px; | ||
Line 43: | Line 49: | ||
z-index: 0; | z-index: 0; | ||
} | } | ||
- | + | /*---------------------------------------------*/ | |
+ | /* The image slider */ | ||
+ | /*---------------------------------------------*/ | ||
#container{ | #container{ | ||
position: relative; | position: relative; | ||
Line 87: | Line 95: | ||
text-align: right; | text-align: right; | ||
} | } | ||
- | #group_text{ | + | #group_text h3, #slide_video h3{ |
position: absolute; | position: absolute; | ||
- | bottom: | + | bottom: 5px; |
- | + | ||
left: inherit; | left: inherit; | ||
- | |||
- | |||
- | |||
- | |||
- | |||
z-index: 1; | z-index: 1; | ||
- | + | line-height: 60px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
+ | #group_text h3 span, #slide_video h3 span{ | ||
+ | background: rgb(0, 0, 0); /* fallback color */ | ||
+ | background: rgba(0, 0, 0, 0.7); | ||
+ | padding: 10px 20px 10px 10px; | ||
+ | } | ||
+ | #slide_video{ | ||
+ | background: #E0E0E0; | ||
+ | width: 935px; | ||
+ | height: 330px; | ||
+ | float: left; | ||
+ | } | ||
+ | #slide_video{ | ||
+ | background: url("https://static.igem.org/mediawiki/2013/3/31/UNIK_Copenhagen_iGEM_the_wheel.png"); | ||
+ | background-repeat: no-repeat; | ||
+ | } | ||
+ | #vid{ | ||
+ | margin: 15px; | ||
+ | float: right; | ||
+ | } | ||
+ | #vid iframe{ | ||
+ | z-index: 100; | ||
+ | } | ||
+ | #vid_text{ | ||
+ | margin: 30px 30px 30px 0px; | ||
+ | float: left; | ||
+ | } | ||
+ | |||
+ | /*-----------------------------------------------------------*/ | ||
+ | /* Panel of 4 photos directing to further down the page */ | ||
+ | /*-----------------------------------------------------------*/ | ||
#four_photos{ | #four_photos{ | ||
height: 183px; | height: 183px; | ||
Line 123: | Line 144: | ||
padding: 0px; | padding: 0px; | ||
margin: 0px 20px 0px 0px; | margin: 0px 20px 0px 0px; | ||
+ | overflow: hidden; | ||
} | } | ||
#fourth_photo{ | #fourth_photo{ | ||
Line 131: | Line 153: | ||
padding: 0px; | padding: 0px; | ||
margin: 0px; | margin: 0px; | ||
+ | overflow: hidden; | ||
} | } | ||
+ | #first_photo img:hover, #second_photo img:hover, #third_photo img:hover, #fourth_photo img:hover{ | ||
+ | margin-top: -183px; | ||
+ | } | ||
+ | |||
+ | /*---------------------------------------------*/ | ||
+ | /* The go-to-top-of-page buttons */ | ||
+ | /*---------------------------------------------*/ | ||
#line{ | #line{ | ||
border-bottom: 1px solid #999999; | border-bottom: 1px solid #999999; | ||
Line 151: | Line 181: | ||
padding: 0px; | padding: 0px; | ||
} | } | ||
+ | /*---------------------------------------------*/ | ||
+ | /* CSS of Q/A part */ | ||
+ | /*---------------------------------------------*/ | ||
.subject, .description{ | .subject, .description{ | ||
float: left; | float: left; | ||
- | |||
} | } | ||
.subject{ | .subject{ | ||
Line 166: | Line 198: | ||
padding: 25px; | padding: 25px; | ||
} | } | ||
- | |||
- | |||
</style> | </style> | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
- | |||
- | |||
var slidePos = 0; | var slidePos = 0; | ||
var Width = 935; | var Width = 935; | ||
- | var animationTime = | + | var animationTime = 300; |
- | var pauseTime = | + | var pauseTime = 5000; |
- | var numPictures = | + | var numPictures = 4; |
+ | var pauseSlider = false; | ||
+ | var youTubePlaying = false; | ||
+ | |||
+ | $(document).ready(function(){ | ||
+ | |||
+ | |||
function slide(targetSlide, par_function){ | function slide(targetSlide, par_function){ | ||
- | + | ||
var new_left = Width * targetSlide *-1; | var new_left = Width * targetSlide *-1; | ||
- | |||
$('#subcontainer').animate({ | $('#subcontainer').animate({ | ||
Line 189: | Line 222: | ||
//left: '-='+slideDistance | //left: '-='+slideDistance | ||
}, animationTime, 'linear', function(){ | }, animationTime, 'linear', function(){ | ||
- | if(par_function != undefined) par_function(); | + | if(par_function != undefined) par_function(); |
- | }); | + | }); |
} | } | ||
Line 196: | Line 229: | ||
function set_interval(){ | function set_interval(){ | ||
interval = window.setInterval(function(){ | interval = window.setInterval(function(){ | ||
+ | if(pauseSlider || youTubePlaying) | ||
+ | return; | ||
slide(slidePos); | slide(slidePos); | ||
slidePos++; | slidePos++; | ||
Line 205: | Line 240: | ||
set_interval(); | set_interval(); | ||
- | + | ||
$('#subcontainer').mouseover(function(){ | $('#subcontainer').mouseover(function(){ | ||
- | window.clearInterval(interval); | + | //window.clearInterval(interval); |
+ | pauseSlider = true; | ||
}).mouseout(function(){ | }).mouseout(function(){ | ||
- | set_interval(); | + | pauseSlider = false; |
+ | //set_interval(); | ||
}); | }); | ||
function nextSlide(){ | function nextSlide(){ | ||
- | window.clearInterval(interval); | + | window.clearInterval(interval); |
//var num_slide = slidePos+1; | //var num_slide = slidePos+1; | ||
- | slidePos++; | + | slidePos++; |
if(slidePos == numPictures) | if(slidePos == numPictures) | ||
slidePos = 0; | slidePos = 0; | ||
Line 222: | Line 259: | ||
function prevSlide(){ | function prevSlide(){ | ||
- | window.clearInterval(interval); | + | window.clearInterval(interval); |
slidePos--; | slidePos--; | ||
if(slidePos == -1) | if(slidePos == -1) | ||
Line 245: | Line 282: | ||
<div id="group_text"> | <div id="group_text"> | ||
<a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain"> | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/TheCphStrain"> | ||
- | <h3>The Copenhagen Strain</ | + | <h3><span>The Copenhagen Strain</span><br> |
- | < | + | <span>Our own strain of magnetic bacteria from a lake in Copenhagen</span></h3></div></a> |
<img src="https://static.igem.org/mediawiki/2013/4/45/UNIK_Copenhagen_slide2.jpeg" width="935" id="photo"> | <img src="https://static.igem.org/mediawiki/2013/4/45/UNIK_Copenhagen_slide2.jpeg" width="935" id="photo"> | ||
Line 253: | Line 290: | ||
<div id="group_text"> | <div id="group_text"> | ||
<a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team"> | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Team"> | ||
- | <h3>The 2013 iGEM Copenhagen Team</ | + | <h3><span>The 2013 iGEM Copenhagen Team</span><br> |
- | < | + | <span>Read more about the iGEM Copenhagen Team Members 2013</span></h3></div></a> |
<img src="https://static.igem.org/mediawiki/2013/2/25/UNIK_Copenhagen_slide1.jpeg" width="935" id="photo"> | <img src="https://static.igem.org/mediawiki/2013/2/25/UNIK_Copenhagen_slide1.jpeg" width="935" id="photo"> | ||
</li> | </li> | ||
Line 260: | Line 297: | ||
<div id="group_text"> | <div id="group_text"> | ||
<a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project"> | <a href="https://2013.igem.org/Team:UNIK_Copenhagen/Project"> | ||
- | <h3>What are we doing in the lab?</ | + | <h3><span>What are we doing in the lab?</span><br> |
- | < | + | <span>Learn more about our project and our magnetotactic bacteria</span></h3></div></a> |
<img src="https://static.igem.org/mediawiki/2013/6/63/UNIK_Copenhagen_slide3.jpeg" width="935" id="photo"> | <img src="https://static.igem.org/mediawiki/2013/6/63/UNIK_Copenhagen_slide3.jpeg" width="935" id="photo"> | ||
+ | </li> | ||
+ | <li class="pictures"> | ||
+ | <div id="slide_video"> | ||
+ | <div id="vid_text"> | ||
+ | <h3><span>Watch our video</span><br> | ||
+ | <span>Learn about our project</span></h3></div> | ||
+ | <!-- <div id="vid"> | ||
+ | <iframe width="480" height="300" src="//www.youtube.com/embed/Y6xQG2dA0tA?feature=player_detailpage&wmode=opaque" frameborder="0" allowfullscreen></iframe> | ||
+ | </div> | ||
+ | --> | ||
+ | <div id="vid"></div> | ||
+ | <script> | ||
+ | // 2. This code loads the IFrame Player API code asynchronously. | ||
+ | var tag = document.createElement('script'); | ||
+ | |||
+ | tag.src = "https://www.youtube.com/iframe_api"; | ||
+ | var firstScriptTag = document.getElementsByTagName('script')[0]; | ||
+ | firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | ||
+ | |||
+ | // 3. This function creates an <iframe> (and YouTube player) | ||
+ | // after the API code downloads. | ||
+ | var player; | ||
+ | function onYouTubeIframeAPIReady() { | ||
+ | player = new YT.Player('vid', { | ||
+ | height: '300', | ||
+ | width: '480', | ||
+ | videoId: 'Y6xQG2dA0tA', | ||
+ | playerVars: { | ||
+ | wmode: "opaque" | ||
+ | }, | ||
+ | events: { | ||
+ | 'onReady': onPlayerReady, | ||
+ | 'onStateChange': onPlayerStateChange | ||
+ | } | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | // 4. The API will call this function when the video player is ready. | ||
+ | function onPlayerReady(event) { | ||
+ | //event.target.playVideo(); | ||
+ | } | ||
+ | |||
+ | // 5. The API calls this function when the player's state changes. | ||
+ | // The function indicates that when playing a video (state=1), | ||
+ | // the player should play for six seconds and then stop. | ||
+ | function onPlayerStateChange(event) { | ||
+ | if (event.data == YT.PlayerState.PLAYING) { | ||
+ | youTubePlaying = true; | ||
+ | } else{ | ||
+ | youTubePlaying = false; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
</li> | </li> | ||
</ul> | </ul> | ||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
- | < | + | <br> |
- | + | ||
<div id="line"></div> | <div id="line"></div> | ||
<div id="four_photos"> | <div id="four_photos"> | ||
+ | |||
<div id="first_photo"> | <div id="first_photo"> | ||
- | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#Who_are_we"><img src="https://static.igem.org/mediawiki/2013/0/08/UNIK_Copenhagen_who_are_we.jpg"> | + | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#Who_are_we"> |
+ | <img src="https://static.igem.org/mediawiki/2013/f/f9/UNIK_Copenhagen_Who_are_we_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/0/08/UNIK_Copenhagen_who_are_we.jpg"> | ||
</a></div> | </a></div> | ||
+ | |||
<div id="second_photo"> | <div id="second_photo"> | ||
- | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_do_we_do"><img src="https://static.igem.org/mediawiki/2013/c/cd/UNIK_Copenhagen_what_do_we_do.jpg"> | + | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_do_we_do"> |
+ | <img src="https://static.igem.org/mediawiki/2013/b/b5/UNIK_Copenhagen_What_do_we_do_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/c/cd/UNIK_Copenhagen_what_do_we_do.jpg"> | ||
</a></div> | </a></div> | ||
+ | |||
<div id="third_photo"> | <div id="third_photo"> | ||
- | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_is_syn_bio"><img src="https://static.igem.org/mediawiki/2013/ | + | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_is_syn_bio"> |
+ | <img src="https://static.igem.org/mediawiki/2013/f/ff/UNIK_Copenhagen_What_is_syn_bio_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/2/2e/UNIK_Copenhagen_what_is_syn_bio.jpg"> | ||
</a></div> | </a></div> | ||
+ | |||
<div id="fourth_photo"> | <div id="fourth_photo"> | ||
- | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_is_iGEM"><img src="https://static.igem.org/mediawiki/2013/5/50/UNIK_Copenhagen_what_is_iGEM.jpg"> | + | <a href="https://2013.igem.org/Team:UNIK_Copenhagen#What_is_iGEM"> |
+ | <img src="https://static.igem.org/mediawiki/2013/3/34/UNIK_Copenhagen_What_is_iGEM_white.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2013/5/50/UNIK_Copenhagen_what_is_iGEM.jpg"> | ||
</a></div> | </a></div> | ||
+ | |||
</div> | </div> | ||
<div id="line"></div> | <div id="line"></div> |
Latest revision as of 18:45, 3 October 2013