Team:BYU Provo/Toronto/FixTest

From 2013.igem.org

(Difference between revisions)
 
Line 2: Line 2:
<html>
<html>
 +
<!--Source: http://coding.smashingmagazine.com/2011/06/16/five-useful-interactive-css-jquery-techniques-deconstruted/#slideshow-navigation. Thanks Jon Raasch-->
<head>
<head>
Line 9: Line 10:
#slideshow {
#slideshow {
-
     width: 900px;
+
     width: 965px;
-
     height: 500px;
+
     height: 450px;
     overflow: hidden;
     overflow: hidden;
     position: relative;
     position: relative;
Line 17: Line 18:
#slideshow-reel {
#slideshow-reel {
-
     width: 5400px;
+
     width: 5790px;
-
     height: 450px;
+
     height: 400px;
     position: absolute;
     position: absolute;
     top: 0;
     top: 0;
Line 25: Line 26:
#slideshow-reel .slide {
#slideshow-reel .slide {
-
     width: 900px;
+
     width: 965px;
-
     height: 450px;
+
     height: 400px;
     float: left;
     float: left;
     background-color: gray;
     background-color: gray;
Line 47: Line 48:
     display: block;
     display: block;
     position: absolute;
     position: absolute;
-
     top: 190px;
+
     top: 175px;
     width: 0;
     width: 0;
     height: 0;
     height: 0;
     border-style: solid;
     border-style: solid;
-
     border-width: 28px 21px;
+
     border-width: 18px 15px;
     border-color: transparent;
     border-color: transparent;
     outline: none;
     outline: none;
Line 64: Line 65:
#slideshow-left {
#slideshow-left {
     left: 0;
     left: 0;
-
     border-right-color: #fff;
+
     border-right-color: #5884b0;
}
}
#slideshow-right {
#slideshow-right {
     right: 0;
     right: 0;
-
     border-left-color: #fff;
+
     border-left-color: #5884b0;
}
}
Line 78: Line 79:
     left: 0;
     left: 0;
     bottom: 0;
     bottom: 0;
-
     width: 900px;
+
     width: 965x;
}
}
Line 176: Line 177:
     <div id="slideshow-reel">
     <div id="slideshow-reel">
         <div class="slide">
         <div class="slide">
-
             <h1>Slide 1</h1>
+
             <img src="https://static.igem.org/mediawiki/2013/3/3b/BYUSlide1.JPG" />
         </div>
         </div>
          
          
         <div class="slide">
         <div class="slide">
-
             <h1>Slide 2</h1>
+
             <img src="https://static.igem.org/mediawiki/2013/9/97/BYUSlide2.JPG" />
         </div>
         </div>
          
          
         <div class="slide">
         <div class="slide">
-
             <h1>Slide 3</h1>
+
             <img src="https://static.igem.org/mediawiki/2013/6/69/BYUSlide3.JPG" />
         </div>
         </div>
          
          
         <div class="slide">
         <div class="slide">
-
             <h1>Slide 4</h1>
+
             <img src="https://static.igem.org/mediawiki/2013/6/6c/BYUSlide4.JPG" />
         </div>
         </div>
          
          
         <div class="slide">
         <div class="slide">
-
             <h1>Slide 5</h1>
+
             <img src="https://static.igem.org/mediawiki/2013/8/8d/BYUSlide5.JPG" />
         </div>
         </div>
          
          
         <div class="slide">
         <div class="slide">
-
             <h1>Slide 6</h1>
+
             <img src="https://static.igem.org/mediawiki/2013/2/2c/BYUSlide6.JPG" />
         </div>
         </div>
     </div>
     </div>
Line 265: Line 266:
         // animate the slide reel
         // animate the slide reel
         $slideReel.animate({
         $slideReel.animate({
-
             left : currSlide * -900
+
             left : currSlide * -965
         }, 400, 'swing', function() {
         }, 400, 'swing', function() {
             // hide / show the arrows depending on which frame it's on
             // hide / show the arrows depending on which frame it's on
Line 275: Line 276:
              
              
             // set new timeout if active
             // set new timeout if active
-
             if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200);
+
             if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 5000);
         });
         });
          
          
Line 329: Line 330:
      
      
     // start the animation
     // start the animation
-
     slideTimeout = setTimeout(nextSlide, 1200);
+
     slideTimeout = setTimeout(nextSlide, 5000);
});
});
</script>
</script>
</html>
</html>

Latest revision as of 19:58, 21 October 2013

Fancy Slideshow Navigation (example)

Retrieved from "http://2013.igem.org/Team:BYU_Provo/Toronto/FixTest"