Difference between revisions of "Team:Elan Vital Korea/Video"

(Created page with "{{ElanVitalKoreaMWlook}} {{ElanVitalKorea}} {{imageslider}} <html> <head> <script> $(document).ready(function(){ // Cache the Window object $window = $(window);...")
 
 
Line 51: Line 51:
 
<script>
 
<script>
 
(function($){
 
(function($){
−
$.fn.extend({
+
    $.fn.extend({
−
blueberry: function(options) {
+
        blueberry: function(options) {
  
−
//default values for plugin options
+
            //default values for plugin options
−
var defaults = {
+
            var defaults = {
−
interval: 5000,
+
                interval: 5000,
−
duration: 500,
+
                duration: 500,
−
lineheight: 1,
+
                lineheight: 1,
−
height: 'auto', //reserved
+
                height: 'auto', //reserved
−
hoverpause: false,
+
                hoverpause: false,
−
pager: true,
+
                pager: true,
−
nav: true, //reserved
+
                nav: true, //reserved
−
keynav: true
+
                keynav: true
−
}
+
            }
−
var options =  $.extend(defaults, options);
+
            var options =  $.extend(defaults, options);
 
   
 
   
−
return this.each(function() {
+
            return this.each(function() {
−
var o = options;
+
                var o = options;
−
var obj = $(this);
+
                var obj = $(this);
  
−
//store the slide and pager li
+
                //store the slide and pager li
−
var slides = $('.slides li', obj);
+
                var slides = $('.slides li', obj);
−
var pager = $('.pager li', obj);
+
                var pager = $('.pager li', obj);
  
−
//set initial current and next slide index values
+
                //set initial current and next slide index values
−
var current = 0;
+
                var current = 0;
−
var next = current+1;
+
                var next = current+1;
  
−
//get height and width of initial slide image and calculate size ratio
+
                //get height and width of initial slide image and calculate size ratio
−
var imgHeight = slides.eq(current).find('img').height();
+
                var imgHeight = slides.eq(current).find('img').height();
−
var imgWidth = slides.eq(current).find('img').width();
+
                var imgWidth = slides.eq(current).find('img').width();
−
var imgRatio = imgWidth/imgHeight;
+
                var imgRatio = imgWidth/imgHeight;
  
−
//define vars for setsize function
+
                //define vars for setsize function
−
var sliderWidth = 0;
+
                var sliderWidth = 0;
−
var cropHeight = 0;
+
                var cropHeight = 0;
  
−
//hide all slides, fade in the first, add active class to first slide
+
                //hide all slides, fade in the first, add active class to first slide
−
slides.hide().eq(current).fadeIn(o.duration).addClass('active');
+
                slides.hide().eq(current).fadeIn(o.duration).addClass('active');
−
+
               
  
−
//build pager if it doesn't already exist and if enabled
+
                //build pager if it doesn't already exist and if enabled
−
if(pager.length) {
+
                if(pager.length) {
−
pager.eq(current).addClass('active');
+
                    pager.eq(current).addClass('active');
−
} else if(o.pager){
+
                } else if(o.pager){
−
obj.append('<ul class="pager"></ul>');
+
                    obj.append('<ul class="pager"></ul>');
−
slides.each(function(index) {
+
                    slides.each(function(index) {
−
$('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>')
+
                        $('.pager', obj).append('<li><a href="#"><span>'+index+'</span></a></li>')
−
});
+
                    });
−
pager = $('.pager li', obj);
+
                    pager = $('.pager li', obj);
−
pager.eq(current).addClass('active');
+
                    pager.eq(current).addClass('active');
−
}
+
                }
  
−
//rotate to selected slide on pager click
+
                //rotate to selected slide on pager click
−
if(pager){
+
                if(pager){
−
$('a', pager).click(function() {
+
                    $('a', pager).click(function() {
−
//stop the timer
+
                        //stop the timer
−
clearTimeout(obj.play);
+
                        clearTimeout(obj.play);
−
//set the slide index based on pager index
+
                        //set the slide index based on pager index
−
next = $(this).parent().index();
+
                        next = $(this).parent().index();
−
//rotate the slides
+
                        //rotate the slides
−
rotate();
+
                        rotate();
−
return false;
+
                        return false;
−
});
+
                    });
−
}
+
                }
  
−
//primary function to change slides
+
                //primary function to change slides
−
var rotate = function(){
+
                var rotate = function(){
−
//fade out current slide and remove active class,
+
                    //fade out current slide and remove active class,
−
//fade in next slide and add active class
+
                    //fade in next slide and add active class
−
slides.eq(current).fadeOut(o.duration).removeClass('active')
+
                    slides.eq(current).fadeOut(o.duration).removeClass('active')
−
.end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){
+
                        .end().eq(next).fadeIn(o.duration).addClass('active').queue(function(){
−
//add rotateTimer function to end of animation queue
+
                            //add rotateTimer function to end of animation queue
−
//this prevents animation buildup caused by requestAnimationFrame
+
                            //this prevents animation buildup caused by requestAnimationFrame
−
//rotateTimer starts a timer for the next rotate
+
                            //rotateTimer starts a timer for the next rotate
−
rotateTimer();
+
                            rotateTimer();
−
$(this).dequeue()
+
                            $(this).dequeue()
−
});
+
                    });
  
−
//update pager to reflect slide change
+
                    //update pager to reflect slide change
−
if(pager){
+
                    if(pager){
−
pager.eq(current).removeClass('active')
+
                        pager.eq(current).removeClass('active')
−
.end().eq(next).addClass('active');
+
                            .end().eq(next).addClass('active');
−
}
+
                    }
  
−
//update current and next vars to reflect slide change
+
                    //update current and next vars to reflect slide change
−
//set next as first slide if current is the last
+
                    //set next as first slide if current is the last
−
current = next;
+
                    current = next;
−
next = current >= slides.length-1 ? 0 : current+1;
+
                    next = current >= slides.length-1 ? 0 : current+1;
−
};
+
                };
−
//create a timer to control slide rotation interval
+
                //create a timer to control slide rotation interval
−
var rotateTimer = function(){
+
                var rotateTimer = function(){
−
obj.play = setTimeout(function(){
+
                    obj.play = setTimeout(function(){
−
//trigger slide rotate function at end of timer
+
                        //trigger slide rotate function at end of timer
−
rotate();
+
                        rotate();
−
}, o.interval);
+
                    }, o.interval);
−
};
+
                };
−
//start the timer for the first time
+
                //start the timer for the first time
−
rotateTimer();
+
                rotateTimer();
  
−
//pause the slider on hover
+
                //pause the slider on hover
−
//disabled by default due to bug
+
                //disabled by default due to bug
−
if(o.hoverpause){
+
                if(o.hoverpause){
−
slides.hover(function(){
+
                    slides.hover(function(){
−
//stop the timer in mousein
+
                        //stop the timer in mousein
−
clearTimeout(obj.play);
+
                        clearTimeout(obj.play);
−
}, function(){
+
                    }, function(){
−
//start the timer on mouseout
+
                        //start the timer on mouseout
−
rotateTimer();
+
                        rotateTimer();
−
});
+
                    });
−
}
+
                }
  
−
//calculate and set height based on image width/height ratio and specified line height
+
                //calculate and set height based on image width/height ratio and specified line height
−
var setsize = function(){
+
                var setsize = function(){
−
sliderWidth = $('.slides', obj).width();
+
                    sliderWidth = $('.slides', obj).width();
−
cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight;
+
                    cropHeight = Math.floor(((sliderWidth/imgRatio)/o.lineheight))*o.lineheight;
  
−
$('.slides', obj).css({height: cropHeight});
+
                    $('.slides', obj).css({height: cropHeight});
−
};
+
                };
−
setsize();
+
                setsize();
  
−
//bind setsize function to window resize event
+
                //bind setsize function to window resize event
−
$(window).resize(function(){
+
                $(window).resize(function(){
−
setsize();
+
                    setsize();
−
});
+
                });
−
+
               
−
+
               
  
−
//Add keyboard navigation
+
                //Add keyboard navigation
  
−
if(o.keynav){
+
                if(o.keynav){
−
$(document).keyup(function(e){
+
                    $(document).keyup(function(e){
  
−
switch (e.which) {
+
                        switch (e.which) {
  
−
case 39: case 32: //right arrow & space
+
                            case 39: case 32: //right arrow & space
  
−
clearTimeout(obj.play);
+
                                clearTimeout(obj.play);
  
−
rotate();
+
                                rotate();
  
−
break;
+
                                break;
  
  
−
case 37: // left arrow
+
                            case 37: // left arrow
−
clearTimeout(obj.play);
+
                                clearTimeout(obj.play);
−
next = current - 1;
+
                                next = current - 1;
−
rotate();
+
                                rotate();
  
−
break;
+
                                break;
−
}
+
                        }
  
−
});
+
                    });
−
}
+
                }
  
  
−
});
+
            });
−
}
+
        }
−
});
+
    });
 
})(jQuery);
 
})(jQuery);
  
Line 410: Line 410:
 
height: auto;
 
height: auto;
 
margin-left:20%;
 
margin-left:20%;
 +
}
 +
 +
.center {
 +
margin: 0 auto;
 +
width: 800px;
 
}
 
}
  
Line 433: Line 438:
 
                 </a>
 
                 </a>
 
                 <h4 style="text-align:center;">
 
                 <h4 style="text-align:center;">
−
                     VIDEO <br><br><br>
+
                     HUMAN PRACTICE <br><br><br>
  
 +
                    VIDEO <Br><br>
  
 
                 </h4>
 
                 </h4>
Line 440: Line 446:
 
           </div>
 
           </div>
 
     </section>
 
     </section>
 +
 +
  
 
     <!-- Section #2 -->
 
     <!-- Section #2 -->
 
         <section id="about" data-speed="10" data-type="background">
 
         <section id="about" data-speed="10" data-type="background">
  
−
<font color="black">
+
<br /><br /><br />
−
<h5 style="text-align:center;"> FOCUS </h5>
+
<h5 style="text-align:center;">
 +
<font color="black">
 +
1. Elan Vital Korea
 
</font>
 
</font>
−
<br>
+
</h5>
−
                        <h5 style="text-align:center;">
+
<br /><br />
−
<font color="black">
+
−
                                    <a name="myAnchor" id="myAnchor"></a><br><br><br>VIDEO</h5> <br><br>
+
−
</font>
+
−
 
+
  
−
Team Intro video:
+
<div class="inner">
 +
<P style="text-align:center;">
 +
<font color="black">
 
<video controls>
 
<video controls>
 
<source src="https://static.igem.org/mediawiki/2015/4/49/EV_Intro.mp4" type="video/mp4">
 
<source src="https://static.igem.org/mediawiki/2015/4/49/EV_Intro.mp4" type="video/mp4">
 
</video>
 
</video>
−
 
−
MRSA Video:
 
−
<video controls>
 
−
<source src="https://static.igem.org/mediawiki/2015/0/02/MRSAA.mp4" type="video/mp4">
 
 
</video>
 
</video>
 +
</p>
 +
</div>
 +
 +
<br /><br /><br />
 +
<h5 style="text-align:center;">
 +
<font color="black">
 +
2. Control Lab Experiment
 +
</font>
 +
</h5>
 +
<br /><br />
  
−
Control Lab Experiment:
+
<div class="inner">
 +
<P style="text-align:center;">
 +
<font color="black">
 
<video controls>
 
<video controls>
 
<source src="https://static.igem.org/mediawiki/2015/0/05/Experiment_full_version.mp4" type="video/mp4">
 
<source src="https://static.igem.org/mediawiki/2015/0/05/Experiment_full_version.mp4" type="video/mp4">
 
</video>
 
</video>
 +
</p>
 +
</div>
  
−
Plasmid Construction Process:
+
<br /><br /><br />
 +
<h5 style="text-align:center;">
 +
<font color="black">
 +
3. Plasmid Construction Process
 +
</font>
 +
</h5>
 +
<br /><br />
 +
 
 +
<div class="inner">
 +
<P style="text-align:center;">
 +
<font color="black">
 
<video controls>
 
<video controls>
 
<source src="https://static.igem.org/mediawiki/2015/8/89/PlasmidConstructionProcess.mp4" type="video/mp4">
 
<source src="https://static.igem.org/mediawiki/2015/8/89/PlasmidConstructionProcess.mp4" type="video/mp4">
 
</video>
 
</video>
 +
</p>
 +
</div>
 +
 +
<br /><br /><br />
 +
<h5 style="text-align:center;">
 +
<font color="black">
 +
4. Biosafety
 
</font>
 
</font>
−
</p>
+
</h5>
 +
<br /><br />
 +
 
 +
<div class="inner">
 +
<P style="text-align:center;">
 +
<font color="black">
 +
<video controls>
 +
<source src="https://static.igem.org/mediawiki/2015/d/dd/Sequence_01_1.mp4" type="video/mp4">
 +
</video>
 +
</p>
 
</div>
 
</div>
  
−
<br>
+
<br /><br /><br />
−
<br>
+
<h5 style="text-align:center;">
−
<br>
+
<font color="black">
−
<a href="#top" rel="" id="top" class="anchorLink"><img class="displayed" src="https://static.igem.org/mediawiki/2015/5/5b/Scroll_arrow_top_Black.png"></a>
+
5. MRSA
−
<h6 style="text-align:center;"> <font color="black">
+
</font>
−
                  To The Top
+
</h5>
−
              </font> </h6>
+
<br /><br />
  
 +
<div class="inner">
 +
<P style="text-align:center;">
 +
<font color="black">
 +
<video controls>
 +
<source src="https://static.igem.org/mediawiki/2015/0/02/MRSAA.mp4" type="video/mp4">
 +
</video>
 +
</p>
 +
</div>
  
−
</section>
+
<br /><br /><br />
 +
<h5 style="text-align:center;">
 +
<font color="black">
 +
6. Introduction to Synthetic Biology
 +
</font>
 +
</h5>
 +
<br /><br />
  
 +
<div class="inner">
 +
<P style="text-align:center;">
 +
<font color="black">
 +
<video controls>
 +
<source src="https://static.igem.org/mediawiki/2015/4/40/Sequence_01_5.mp4" type="video/mp4">
 +
</video>
 +
</p>
 +
</div>
  
 +
</section>
  
  

Latest revision as of 23:29, 18 September 2015








HUMAN PRACTICE


VIDEO




1. Elan Vital Korea





2. Control Lab Experiment





3. Plasmid Construction Process





4. Biosafety





5. MRSA





6. Introduction to Synthetic Biology