Difference between revisions of "Team:elan vital korea/safety"
Line 1: | Line 1: | ||
{{ElanVitalKoreaMWlook}} | {{ElanVitalKoreaMWlook}} | ||
{{ElanVitalKorea}} | {{ElanVitalKorea}} | ||
+ | {{imageslider}} | ||
<html> | <html> | ||
− | + | <head> | |
− | < | + | |
<script> | <script> | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
Line 14: | Line 14: | ||
$(window).scroll(function() { | $(window).scroll(function() { | ||
− | + | boot | |
// Scroll the background at var speed | // Scroll the background at var speed | ||
// the yPos is a negative value because we're scrolling it UP! | // the yPos is a negative value because we're scrolling it UP! | ||
Line 37: | Line 37: | ||
document.createElement("section"); | document.createElement("section"); | ||
</script> | </script> | ||
+ | |||
+ | |||
+ | |||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> | ||
+ | <script src="jquery.blueberry.js"></script> | ||
+ | |||
+ | <script> | ||
+ | $(window).load(function() { | ||
+ | $('.blueberry').blueberry(); | ||
+ | }); | ||
+ | </script> | ||
+ | |||
+ | <script> | ||
+ | (function($){ | ||
+ | $.fn.extend({ | ||
+ | blueberry: function(options) { | ||
+ | |||
+ | //default values for plugin options | ||
+ | var defaults = { | ||
+ | interval: 5000, | ||
+ | duration: 500, | ||
+ | lineheight: 1, | ||
+ | height: 'auto', //reserved | ||
+ | hoverpause: false, | ||
+ | pager: true, | ||
+ | nav: true, //reserved | ||
+ | keynav: true | ||
+ | } | ||
+ | var options = $.extend(defaults, options); | ||
+ | |||
+ | return this.each(function() { | ||
+ | var o = options; | ||
+ | var obj = $(this); | ||
+ | |||
+ | //store the slide and pager li | ||
+ | var slides = $('.slides li', obj); | ||
+ | var pager = $('.pager li', obj); | ||
+ | |||
+ | //set initial current and next slide index values | ||
+ | var current = 0; | ||
+ | var next = current+1; | ||
+ | |||
+ | //get height and width of initial slide image and calculate size ratio | ||
+ | var imgHeight = slides.eq(current).find('img').height(); | ||
+ | var imgWidth = slides.eq(current).find('img').width(); | ||
+ | var imgRatio = imgWidth/imgHeight; | ||
+ | |||
+ | //define vars for setsize function | ||
+ | var sliderWidth = 0; | ||
+ | var cropHeight = 0; | ||
+ | |||
+ | //hide all slides, fade in the first, add active class to first slide | ||
+ | slides.hide().eq(current).fadeIn(o.duration).addClass('active'); | ||
+ | |||
+ | |||
+ | //build pager if it doesn't already exist and if enabled | ||
+ | if(pager.length) { | ||
+ | pager.eq(current).addClass('active'); | ||
+ | } else if(o.pager){ | ||
+ | obj.append('<ul class="pager"></ul>'); | ||
+ | slides.each(function(index) { | ||
+ | $('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>') | ||
+ | }); | ||
+ | pager = $('.pager li', obj); | ||
+ | pager.eq(current).addClass('active'); | ||
+ | } | ||
+ | |||
+ | //rotate to selected slide on pager click | ||
+ | if(pager){ | ||
+ | $('a', pager).click(function() { | ||
+ | //stop the timer | ||
+ | cleonarTimeout(obj.play); | ||
+ | //set the slide index based on pager index | ||
+ | next = $(this).parent().index(); | ||
+ | //rotate the slides | ||
+ | rotate(); | ||
+ | return false; | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | //primary function to change slides | ||
+ | var rotate = function(){ | ||
+ | //fade out current slide and remove active class, | ||
+ | //fade in next slide and add active class | ||
+ | slides.eq(current).fadeOut(o.duration).removeClass('active') | ||
+ | .end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){ | ||
+ | //add rotateTimer function to end of animation queue | ||
+ | //this prevents animation buildup caused by requestAnimationFrame | ||
+ | //rotateTimer starts a timer for the next rotate | ||
+ | rotateTimer(); | ||
+ | $(this).dequeue() | ||
+ | }); | ||
+ | |||
+ | //update pager to reflect slide change | ||
+ | if(pager){ | ||
+ | pager.eq(current).removeClass('active') | ||
+ | .end().eq(next).addClass('active'); | ||
+ | } | ||
+ | |||
+ | //update current and next vars to reflect slide change | ||
+ | //set next as first slide if current is the last | ||
+ | current = next; | ||
+ | next = current >= slides.length-1 ? 0 : current+1; | ||
+ | }; | ||
+ | //create a timer to control slide rotation interval | ||
+ | var rotateTimer = function(){ | ||
+ | obj.play = setTimeout(function(){ | ||
+ | //trigger slide rotate function at end of timer | ||
+ | rotate(); | ||
+ | }, o.interval); | ||
+ | }; | ||
+ | //start the timer for the first time | ||
+ | rotateTimer(); | ||
+ | |||
+ | //pause the slider on hover | ||
+ | //disabled by default due to bug | ||
+ | if(o.hoverpause){ | ||
+ | slides.hover(function(){ | ||
+ | //stop the timer in mousein | ||
+ | clearTimeout(obj.play); | ||
+ | }, function(){ | ||
+ | //start the timer on mouseout | ||
+ | rotateTimer(); | ||
+ | }); | ||
+ | } | ||
+ | |||
+ | //calculate and set height based on image width/height ratio and specified line height | ||
+ | var setsize = function(){ | ||
+ | sliderWidth = $('.slides', obj).width(); | ||
+ | cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight; | ||
+ | |||
+ | $('.slides', obj).css({height: cropHeight}); | ||
+ | }; | ||
+ | setsize(); | ||
+ | |||
+ | //bind setsize function to window resize event | ||
+ | $(window).resize(function(){ | ||
+ | setsize(); | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | //Add keyboard navigation | ||
+ | |||
+ | if(o.keynav){ | ||
+ | $(document).keyup(function(e){ | ||
+ | |||
+ | switch (e.which) { | ||
+ | |||
+ | case 39: case 32: //right arrow & space | ||
+ | |||
+ | clearTimeout(obj.play); | ||
+ | |||
+ | rotate(); | ||
+ | |||
+ | break; | ||
+ | |||
+ | |||
+ | case 37: // left arrow | ||
+ | clearTimeout(obj.play); | ||
+ | next = current - 1; | ||
+ | rotate(); | ||
+ | |||
+ | break; | ||
+ | } | ||
+ | |||
+ | }); | ||
+ | } | ||
+ | |||
+ | |||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | })(jQuery); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
<style> | <style> | ||
Line 49: | Line 227: | ||
#home { | #home { | ||
− | background: url(https://static.igem.org/mediawiki/2015/ | + | background: url(https://static.igem.org/mediawiki/2015/6/66/HumanPracticeBG.png) 50% 0 no-repeat fixed; |
min-height:1000px; | min-height:1000px; | ||
height: 1000px; | height: 1000px; | ||
Line 110: | Line 288: | ||
font: 10px/1.5 Verdana, Helvetica, sans-serif; | font: 10px/1.5 Verdana, Helvetica, sans-serif; | ||
float: left; | float: left; | ||
− | width: | + | width: 20%; |
− | margin: 2% 2% 50px | + | margin: 2% 2% 50px 8%; |
} | } | ||
Line 159: | Line 337: | ||
h5{ | h5{ | ||
text-decoration:none; | text-decoration:none; | ||
− | font-size: | + | font-size: 22px; |
letter-spacing:1px; | letter-spacing:1px; | ||
line-height:25px; | line-height:25px; | ||
Line 168: | Line 346: | ||
p { | p { | ||
font-size:16px; | font-size:16px; | ||
− | line-height: | + | line-height:170%; |
} | } | ||
Line 286: | Line 464: | ||
a:focus { text-decoration: none; color:white; } | a:focus { text-decoration: none; color:white; } | ||
a:hover, a:active { text-decoration: none; color:white;} | a:hover, a:active { text-decoration: none; color:white;} | ||
+ | |||
+ | |||
</style> | </style> | ||
Line 294: | Line 474: | ||
<!-- Section #1 --> | <!-- Section #1 --> | ||
<section id="home" data-speed="10" data-type="background"> | <section id="home" data-speed="10" data-type="background"> | ||
+ | |||
</section> | </section> | ||
− | |||
− | |||
Line 305: | Line 484: | ||
<!-- Section #2 --> | <!-- Section #2 --> | ||
<section id="about" data-speed="10" data-type="background"> | <section id="about" data-speed="10" data-type="background"> | ||
− | </section> | + | |
+ | </section> | ||
Line 312: | Line 492: | ||
+ | <!-- Section #3 --> | ||
+ | <section id="maintext" data-speed="10" data-type="background"> | ||
+ | </section> | ||
− | |||
− | |||
− | |||
+ | <!-- Section #4 --> | ||
+ | <section id="maintext2" data-speed="10" data-type="background"> | ||
+ | </section> | ||
− | <!-- Section # | + | |
+ | |||
+ | |||
+ | <!-- Section #5 --> | ||
+ | <section id="maintext" data-speed="10" data-type="background"> | ||
+ | </section> | ||
+ | |||
+ | <!-- Section #6 --> | ||
<section id="maintext2" data-speed="10" data-type="background"> | <section id="maintext2" data-speed="10" data-type="background"> | ||
− | </section> | + | </section> |
− | |||
− | |||
− | |||
+ | <!-- Section #7 --> | ||
+ | |||
+ | <section id="maintext" data-speed="10" data-type="background"> | ||
+ | </section> | ||
Line 341: | Line 532: | ||
− | <!-- Section # | + | <!-- Section #8 --> |
<section id="maintext2" data-speed="10" data-type="background"> | <section id="maintext2" data-speed="10" data-type="background"> | ||
− | </section> | + | </section> |
− | <!-- Section # | + | |
+ | <!-- Section #9 --> | ||
<section id="maintext" data-speed="10" data-type="background"> | <section id="maintext" data-speed="10" data-type="background"> | ||
− | </section> | + | </section> |
− | <!-- Section # | + | <!-- Section #9 --> |
<section id="maintext2" data-speed="10" data-type="background"> | <section id="maintext2" data-speed="10" data-type="background"> | ||
+ | </section> | ||
− | |||
− | <!-- Section # | + | |
+ | |||
+ | |||
+ | <!-- Section #10 --> | ||
<section id="maintext" data-speed="10" data-type="background"> | <section id="maintext" data-speed="10" data-type="background"> | ||
+ | </section> | ||
− | </section> | + | |
+ | |||
+ | |||
+ | |||
+ | |||
+ | <!-- Section #11 --> | ||
+ | <section id="maintext2" data-speed="10" data-type="background"> | ||
+ | </section> | ||
Revision as of 19:45, 16 September 2015