|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| − | <body id="home">
| |
| − | </body>
| |
| − |
| |
| | | | |
| | <style type="text/css"> | | <style type="text/css"> |
| Line 245: |
Line 242: |
| | position: absolute; | | position: absolute; |
| | box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); | | box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | #box {
| |
| − |
| |
| | } | | } |
| | | | |
| Line 260: |
Line 247: |
| | | | |
| | | | |
| − | <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>
| |
| | | | |
| | | | |
| | | | |
| − | | + | <div id="container"> |
| − |
| + | |
| − | | + | <div id="imgslider"></div> |
| − | <div id="imgslider"></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="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="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> |
