Team:Brown-Stanford/Templates/Main
From 2011.igem.org
(Difference between revisions)
Line 13: | Line 13: | ||
var slideshowSpeed = 6000; | var slideshowSpeed = 6000; | ||
+ | // Variable to store the images we need to set as background | ||
+ | // which also includes some text and url's. | ||
var photos = [ { | var photos = [ { | ||
- | " | + | "image" : "https://static.igem.org/mediawiki/2011/a/a1/Brown-Stanford_BG1.jpg", |
}, { | }, { | ||
- | " | + | "image" : "https://static.igem.org/mediawiki/2011/8/81/Brown-Stanford_BG2.jpg", |
}, { | }, { | ||
- | " | + | "image" : "https://static.igem.org/mediawiki/2011/a/a9/Brown-Stanford_BG3.jpg", |
}, { | }, { | ||
- | " | + | "image" : "https://static.igem.org/mediawiki/2011/f/fd/Brown-Stanford_BG4.jpg", |
}, { | }, { | ||
- | " | + | "image" : "https://static.igem.org/mediawiki/2011/4/4c/Brown-Stanford_BG5.jpg", |
}, { | }, { | ||
- | " | + | "image" : "https://static.igem.org/mediawiki/2011/7/7f/Brown-Stanford_BG6.jpg", |
} | } | ||
]; | ]; | ||
Line 31: | Line 33: | ||
$(document).ready(function() { | $(document).ready(function() { | ||
- | + | ||
+ | var interval; | ||
var activeContainer = 1; | var activeContainer = 1; | ||
var currentImg = 0; | var currentImg = 0; | ||
- | var animating = | + | var animating = false; |
- | var navigate = function( | + | var navigate = function(direction) { |
+ | // Check if no animation is running. If it is, prevent the action | ||
if(animating) { | if(animating) { | ||
return; | return; | ||
} | } | ||
+ | // Check which current image we need to show | ||
+ | if(direction == "next") { | ||
+ | currentImg++; | ||
+ | if(currentImg == photos.length + 1) { | ||
+ | currentImg = 1; | ||
+ | } | ||
+ | } | ||
+ | |||
// Check which container we need to use | // Check which container we need to use | ||
var currentContainer = activeContainer; | var currentContainer = activeContainer; | ||
Line 48: | Line 60: | ||
} | } | ||
- | showImage(photos[currentImg], currentContainer, activeContainer); | + | showImage(photos[currentImg - 1], currentContainer, activeContainer); |
}; | }; | ||
Line 64: | Line 76: | ||
"display" : "block", | "display" : "block", | ||
"z-index" : currentZindex | "z-index" : currentZindex | ||
- | |||
- | |||
- | |||
}); | }); | ||
- | |||
- | |||
// Fade out the current container | // Fade out the current container | ||
Line 76: | Line 83: | ||
setTimeout(function() { | setTimeout(function() { | ||
animating = false; | animating = false; | ||
- | }, | + | }, 2000); |
}); | }); | ||
+ | }; | ||
+ | |||
+ | var stopAnimation = function() { | ||
+ | // Change the background image to "play" | ||
+ | $("#control").css({ "background-image" : "url(images/btn_play.png)" }); | ||
+ | |||
+ | // Clear the interval | ||
+ | clearInterval(interval); | ||
}; | }; | ||
Line 624: | Line 639: | ||
</head> | </head> | ||
<body> | <body> | ||
- | <div id="headerimg1" class="headerimg"> | + | <div id="headerimg1" class="headerimg"></div> |
<div id="headerimg2" class="headerimg"></div> | <div id="headerimg2" class="headerimg"></div> | ||
- | <div id="header" style="height:100px;padding: 85px 55px 10px 55px" | + | <div id="header" style="height:100px;padding: 85px 55px 10px 55px"> |
<ul id="sdt_menu" class="sdt_menu"> | <ul id="sdt_menu" class="sdt_menu"> | ||
<li> | <li> | ||
Line 698: | Line 713: | ||
</div> | </div> | ||
</li> | </li> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</ul> | </ul> | ||
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<div class="content"> | <div class="content"> |
Revision as of 23:21, 9 June 2011