Difference between revisions of "Team:elan vital korea/safety"

Line 1: Line 1:
 
{{ElanVitalKoreaMWlook}}
 
{{ElanVitalKoreaMWlook}}
 
{{ElanVitalKorea}}
 
{{ElanVitalKorea}}
 +
{{imageslider}}
  
 
<html>
 
<html>
−
 
+
<head>
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
+
 
<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/b/b3/Bg2.png) 50% 0 no-repeat fixed;
+
     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: 16%;
+
     width: 20%;
−
     margin:  2% 2% 50px 2%;
+
     margin:  2% 2% 50px 8%;
 
}
 
}
 
   
 
   
Line 159: Line 337:
 
h5{
 
h5{
 
text-decoration:none;
 
text-decoration:none;
−
font-size: 24px;
+
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:180%;
+
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 #3 -->
 
−
        <section id="maintext" data-speed="10" data-type="background">
 
−
</section>
 
  
  
  
  
 +
    <!-- Section #4 -->
 +
        <section id="maintext2" data-speed="10" data-type="background">
 +
        </section>
  
  
  
−
<!-- Section #4 -->
+
 
 +
 
 +
 
 +
    <!-- 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 #5 -->
 
−
        <section id="maintext" data-speed="10" data-type="background">
 
−
</section>
 
  
 +
    <!-- Section #7 -->
  
 +
 +
        <section id="maintext" data-speed="10" data-type="background">
 +
        </section>
  
  
Line 341: Line 532:
  
  
−
<!-- Section #6 -->
+
    <!-- Section #8 -->
 
         <section id="maintext2" data-speed="10" data-type="background">
 
         <section id="maintext2" data-speed="10" data-type="background">
−
</section>
+
        </section>
  
  
−
<!-- Section #7 -->
+
 
 +
    <!-- Section #9 -->
 
         <section id="maintext" data-speed="10" data-type="background">
 
         <section id="maintext" data-speed="10" data-type="background">
−
</section>
+
        </section>
  
  
  
  
−
<!-- Section #8 -->
+
    <!-- Section #9 -->
 
         <section id="maintext2" data-speed="10" data-type="background">
 
         <section id="maintext2" data-speed="10" data-type="background">
 +
        </section>
  
−
</section>
 
  
  
  
−
<!-- Section #9 -->
+
 
 +
 
 +
 
 +
    <!-- 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