Difference between revisions of "Team:NYMU-Taipei"

Line 246: Line 246:
 
</style>
 
</style>
  
 +
 +
 +
<script>
 +
$(document).ready(function() {
 +
 +
                                $('.Slides').css('transition', 'opacity 1s ease-out');
 +
$('.Slides').css('opacity', '0');
 +
$('.Slides').css(' height', '0');
 +
$('.Slides').css('overflow', 'hidden');
 +
                                //Display slider for Javascript users
 +
$('#Slider').css('display', 'block');
 +
$('#Slider').css('opacity', '1');
 +
var TotalSlides = $('.Slides').length;
 +
var CurrentSlide = 0;
 +
CurrentSlide = CurrentSlide % TotalSlides;
 +
changeSlide(CurrentSlide);
 +
                             
 +
//Set height of slider (16/5 ratio)
 +
$('#Slider').css('height', ($('body').width() / 2.5));
 +
 +
//Position right/left arrows
 +
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
 +
$('#LeftBar, #RightBar').css('height', BarHeight);
 +
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 +
 +
//Repeats for window resize
 +
$(window).resize(function() {
 +
$('#Slider').css('height', ($('body').width() / 2.5));
 +
 +
var BarHeight = $('#Slider').height() -  $('#BottomLinks').height();
 +
$('#LeftBar, #RightBar').css('height', BarHeight);
 +
$('#LeftArrow, #RightArrow').css('top', (BarHeight-60)/2);
 +
});
 +
 +
var TotalSlides = $('.Slides').length;
 +
var CurrentSlide = 0;
 +
 +
$('#RightArrow').click(function() {
 +
CurrentSlide = ++CurrentSlide % TotalSlides;
 +
changeSlide(CurrentSlide);
 +
                                        if (timer) { clearInterval(timer) }
 +
});
 +
 +
$('#LeftArrow').click(function() {
 +
CurrentSlide = (CurrentSlide + TotalSlides - 1) % TotalSlides;
 +
changeSlide(CurrentSlide);
 +
                                        if (timer) { clearInterval(timer) }
 +
});
 +
 +
$('.SlideLink').click(function() {
 +
var ClickedSlide = $(this).attr('id');
 +
CurrentSlide = parseInt(ClickedSlide.replace('Link', ''));
 +
changeSlide(CurrentSlide);
 +
});
 +
 +
 +
                                     
 +
 
 +
                                var timer;
 +
// when mouse enters, clear the timer if it has been set
 +
$("#imgslider").mouseenter(function(){if (timer) { clearInterval(timer) }})
 +
                    // when mouse goes out, start the slideshow
 +
                        .mouseleave(function() {timer = setInterval(function() {CurrentSlide = ++CurrentSlide % TotalSlides;changeSlide(CurrentSlide);}, 4000);})
 +
      // trigger mouseleave for initial slideshow starting
 +
                                              .mouseleave();
 +
                                                                   
 +
 +
                               
 +
 +
                                function changeSlide(num){
 +
var SlideID = '#Slide' + num;
 +
 +
$('.Slides').css('transition', 'opacity 0.5s ease-out');
 +
$('.Slides').css('opacity', '0');
 +
$('.Slides').css(' height', '0');
 +
$('.Slides').css('overflow', 'hidden');
 +
 +
 +
$(SlideID).css('opacity', '1');
 +
//Set height of slider (16/5 ratio)
 +
$('#Slider').css('height', ($('body').width() / 2.5));
 +
 +
 +
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
});
 +
</script>
  
  
Line 252: Line 346:
 
<div id="container">
 
<div id="container">
 
     <div id="Slider">
 
     <div id="Slider">
−
        <div id="imgslider"></div>
+
      </div>
−
<div id="Slide0" class="Slides current"><img src="https://static.igem.org/mediawiki/2015/4/49/Ymu-slide-intro.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
<div id="Slide1" class="Slides"><img src="https://static.igem.org/mediawiki/2015/9/92/Nymu-slide-Problem.jpg" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
<div id="Slide2" class="Slides"><img src="https://static.igem.org/mediawiki/2015/3/36/Nymu-slide-patho.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
<div id="Slide3" class="Slides"><img src="https://static.igem.org/mediawiki/2015/0/01/Nymu-slide-FYVE.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
<div id="Slide4" class="Slides"><img src="https://static.igem.org/mediawiki/2015/f/f6/Nymu-slide-Smfc.png" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
                                <div id="Slide5" class="Slides"><img src="https://static.igem.org/mediawiki/2015/7/7f/Nymu-slide-Defensin.jpg" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
<div id="Slide6" class="Slides"><img src="https://static.igem.org/mediawiki/2015/4/46/Nymu-slide-D_system.jpg" style="PADDING-LEFT: 15%;padding-top:5% ;"width="70%" ></div>
+
−
+
−
                                <div id="LeftBar" class="SideBar">
+
−
                                <div id="LeftArrow"></div></div>
+
−
<div id="RightBar" class="SideBar">
+
−
                                <div id="RightArrow"></div></div>
+
−
  </div>
+
 
                   </div>
 
                   </div>
 
   <div id="container2">  
 
   <div id="container2">  

Revision as of 13:06, 18 July 2016