Team:BYU Provo/Toronto/FixTest
From 2013.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
{{TeamBYUProvoFix}} | {{TeamBYUProvoFix}} | ||
- | < | + | <html> |
+ | <head> | ||
- | + | <title>Fancy Slideshow Navigation (example)</title> | |
- | + | ||
- | + | <style type="text/css"> | |
- | + | #slideshow { | |
+ | width: 900px; | ||
+ | height: 500px; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | margin: 20px auto; | ||
+ | } | ||
- | + | #slideshow-reel { | |
- | + | width: 5400px; | |
+ | height: 450px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | } | ||
- | + | #slideshow-reel .slide { | |
+ | width: 900px; | ||
+ | height: 450px; | ||
+ | float: left; | ||
+ | background-color: gray; | ||
+ | } | ||
- | : | + | #slideshow-reel .slide:nth-child(2n+1) { |
+ | background-color: #333; | ||
+ | } | ||
- | + | #slideshow-reel h1 { | |
+ | margin: 25px 60px; | ||
+ | color: #FFF; | ||
+ | font-size: 3em; | ||
+ | text-shadow: 0 -1px 1px #333; | ||
+ | } | ||
- | + | /* arrow navigation */ | |
- | + | .slideshow-arrow { | |
- | + | display: block; | |
+ | position: absolute; | ||
+ | top: 190px; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-style: solid; | ||
+ | border-width: 28px 21px; | ||
+ | border-color: transparent; | ||
+ | outline: none; | ||
+ | } | ||
- | + | .slideshow-arrow:hover { | |
+ | opacity: .5; | ||
+ | filter: alpha(opacity=50); | ||
+ | -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; | ||
+ | } | ||
- | + | #slideshow-left { | |
+ | left: 0; | ||
+ | border-right-color: #fff; | ||
+ | } | ||
+ | #slideshow-right { | ||
+ | right: 0; | ||
+ | border-left-color: #fff; | ||
+ | } | ||
- | + | /* bottom navigation */ | |
- | < | + | #slideshow-nav { |
- | < | + | position: absolute; |
+ | left: 0; | ||
+ | bottom: 0; | ||
+ | width: 900px; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav .nav-item { | ||
+ | float: left; | ||
+ | width: 150px; | ||
+ | padding: 11px 0; | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav .nav-item-line { | ||
+ | float: left; | ||
+ | width: 68px; | ||
+ | height: 1px; | ||
+ | line-height: 1px; | ||
+ | margin: 3px 0; | ||
+ | background-color: #bbb; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav .nav-item-line-hidden { | ||
+ | background-color: transparent; | ||
+ | } | ||
+ | |||
+ | #slideshow-nav .nav-item-dot { | ||
+ | float: left; | ||
+ | width: 8px; | ||
+ | height: 8px; | ||
+ | margin: 0 3px; | ||
+ | -webkit-border-radius: 4px; | ||
+ | -moz-border-radius: 4px; | ||
+ | border-radius: 4px; | ||
+ | background-color: #5884b0; | ||
+ | } | ||
+ | |||
+ | /* active nav dot */ | ||
+ | |||
+ | #active-nav-item { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | width: 30px; | ||
+ | height: 30px; | ||
+ | margin-left: 60px; | ||
+ | background-color: #8e8d8b; | ||
+ | background-color: rgba(28, 27, 23, .5); | ||
+ | -webkit-border-radius: 15px; | ||
+ | -moz-border-radius: 15px; | ||
+ | border-radius: 15px; | ||
+ | } | ||
+ | |||
+ | #active-nav-item .active-nav-item-inner { | ||
+ | display: inline-block; | ||
+ | width: 8px; | ||
+ | height: 8px; | ||
+ | margin: 11px; | ||
+ | -webkit-border-radius: 4px; | ||
+ | -moz-border-radius: 4px; | ||
+ | border-radius: 4px; | ||
+ | background-color: #000; | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | <!--[if lt IE 7]> | ||
+ | <style type="text/css"> | ||
+ | .slideshow-arrow, | ||
+ | #slideshow-nav .nav-item-line, | ||
+ | #slideshow-nav .nav-item-dot { | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | |||
+ | .slideshow-arrow, | ||
+ | .slideshow-arrow:hover { | ||
+ | border-top-color: pink; | ||
+ | border-bottom-color: pink; | ||
+ | filter: chroma(color=pink); | ||
+ | } | ||
+ | |||
+ | #slideshow-left { | ||
+ | border-left-color: pink; | ||
+ | } | ||
+ | |||
+ | #slideshow-right { | ||
+ | border-right-color: pink; | ||
+ | } | ||
+ | </style> | ||
+ | <![endif]--> | ||
+ | |||
+ | </head> | ||
+ | |||
+ | <body> | ||
+ | |||
+ | <div id="slideshow"> | ||
+ | <div id="slideshow-reel"> | ||
+ | <div class="slide"> | ||
+ | <h1>Slide 1</h1> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <h1>Slide 2</h1> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <h1>Slide 3</h1> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <h1>Slide 4</h1> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <h1>Slide 5</h1> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide"> | ||
+ | <h1>Slide 6</h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <a href="#" id="slideshow-left" class="slideshow-arrow"></a> | ||
+ | <a href="#" id="slideshow-right" class="slideshow-arrow"></a> | ||
+ | |||
+ | <div id="slideshow-nav"> | ||
+ | <a href="#" class="nav-item"> | ||
+ | <span class="nav-item-line nav-item-line-hidden"></span> | ||
+ | <span class="nav-item-dot"></span> | ||
+ | <span class="nav-item-line"></span> | ||
+ | </a> | ||
+ | |||
+ | <a href="#" class="nav-item"> | ||
+ | <span class="nav-item-line"></span> | ||
+ | <span class="nav-item-dot"></span> | ||
+ | <span class="nav-item-line"></span> | ||
+ | </a> | ||
+ | |||
+ | <a href="#" class="nav-item"> | ||
+ | <span class="nav-item-line"></span> | ||
+ | <span class="nav-item-dot"></span> | ||
+ | <span class="nav-item-line"></span> | ||
+ | </a> | ||
+ | |||
+ | <a href="#" class="nav-item"> | ||
+ | <span class="nav-item-line"></span> | ||
+ | <span class="nav-item-dot"></span> | ||
+ | <span class="nav-item-line"></span> | ||
+ | </a> | ||
+ | |||
+ | <a href="#" class="nav-item"> | ||
+ | <span class="nav-item-line"></span> | ||
+ | <span class="nav-item-dot"></span> | ||
+ | <span class="nav-item-line"></span> | ||
+ | </a> | ||
+ | |||
+ | <a href="#" class="nav-item"> | ||
+ | <span class="nav-item-line"></span> | ||
+ | <span class="nav-item-dot"></span> | ||
+ | <span class="nav-item-line nav-item-line-hidden"></span> | ||
+ | </a> | ||
+ | |||
+ | <span id="active-nav-item"> | ||
+ | <span class="active-nav-item-inner"></span> | ||
+ | </span> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js | ||
+ | "></script> | ||
+ | <script type="text/javascript"> | ||
+ | |||
+ | $(function() { | ||
+ | function changeSlide( newSlide ) { | ||
+ | // cancel any timeout | ||
+ | clearTimeout( slideTimeout ); | ||
+ | |||
+ | // change the currSlide value | ||
+ | currSlide = newSlide; | ||
+ | |||
+ | // make sure the currSlide value is not too low or high | ||
+ | if ( currSlide > maxSlide ) currSlide = 0; | ||
+ | else if ( currSlide < 0 ) currSlide = maxSlide; | ||
+ | |||
+ | // animate the slide reel | ||
+ | $slideReel.animate({ | ||
+ | left : currSlide * -900 | ||
+ | }, 400, 'swing', function() { | ||
+ | // hide / show the arrows depending on which frame it's on | ||
+ | if ( currSlide == 0 ) $slideLeftNav.hide(); | ||
+ | else $slideLeftNav.show(); | ||
+ | |||
+ | if ( currSlide == maxSlide ) $slideRightNav.hide(); | ||
+ | else $slideRightNav.show(); | ||
+ | |||
+ | // set new timeout if active | ||
+ | if ( activeSlideshow ) slideTimeout = setTimeout(nextSlide, 1200); | ||
+ | }); | ||
+ | |||
+ | // animate the navigation indicator | ||
+ | $activeNavItem.animate({ | ||
+ | left : currSlide * 150 | ||
+ | }, 400, 'swing'); | ||
+ | } | ||
+ | |||
+ | function nextSlide() { | ||
+ | changeSlide( currSlide + 1 ); | ||
+ | } | ||
+ | |||
+ | // define some variables / DOM references | ||
+ | var activeSlideshow = true, | ||
+ | currSlide = 0, | ||
+ | slideTimeout, | ||
+ | $slideshow = $('#slideshow'), | ||
+ | $slideReel = $slideshow.find('#slideshow-reel'), | ||
+ | maxSlide = $slideReel.children().length - 1, | ||
+ | $slideLeftNav = $slideshow.find('#slideshow-left'), | ||
+ | $slideRightNav = $slideshow.find('#slideshow-right'), | ||
+ | $activeNavItem = $slideshow.find('#active-nav-item'); | ||
+ | |||
+ | // set navigation click events | ||
+ | |||
+ | // left arrow | ||
+ | $slideLeftNav.click(function(ev) { | ||
+ | ev.preventDefault(); | ||
+ | |||
+ | activeSlideshow = false; | ||
+ | |||
+ | changeSlide( currSlide - 1 ); | ||
+ | }); | ||
+ | |||
+ | // right arrow | ||
+ | $slideRightNav.click(function(ev) { | ||
+ | ev.preventDefault(); | ||
+ | |||
+ | activeSlideshow = false; | ||
+ | |||
+ | changeSlide( currSlide + 1 ); | ||
+ | }); | ||
+ | |||
+ | // main navigation | ||
+ | $slideshow.find('#slideshow-nav a.nav-item').click(function(ev) { | ||
+ | ev.preventDefault(); | ||
+ | |||
+ | activeSlideshow = false; | ||
+ | |||
+ | changeSlide( $(this).index() ); | ||
+ | }); | ||
+ | |||
+ | // start the animation | ||
+ | slideTimeout = setTimeout(nextSlide, 1200); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | </html> |
Revision as of 19:32, 21 October 2013
![](http://groselab.byu.edu/Portals/92/Images/Figures/IGEMlogosmall.png)