Team:Brown-Stanford/Templates/Main

From 2011.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
<!--
 +
 +
Please link to our wiki and cite us if you like what you see and would like to use
 +
any of the code used on our wiki.
 +
 +
-Brown-Stanford iGEM 2011
 +
 +
-->
 +
__NOTOC__<html lang="en">  
__NOTOC__<html lang="en">  
<head>  
<head>  
Line 5: Line 14:
<script type="text/javascript">
<script type="text/javascript">
<!--  
<!--  
-
 
-
/*
 
-
* Author:      Marco Kuiper (http://www.marcofolio.net/)
 
-
*/
 
-
 
-
// Speed of the automatic slideshow
 
var slideshowSpeed = 20000;
var slideshowSpeed = 20000;
-
 
-
// 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/a/a1/Brown-Stanford_BG1.jpg",
Line 29: Line 29:
}
}
];
];
-
 
-
 
-
 
$(document).ready(function() {
$(document).ready(function() {
-
 
var interval;
var interval;
var activeContainer = 1;
var activeContainer = 1;
Line 39: Line 35:
var animating = false;
var animating = false;
var navigate = function(direction) {
var navigate = function(direction) {
-
// Check if no animation is running. If it is, prevent the action
 
-
if(animating) {
 
-
return;
 
-
}
 
-
 
-
// Check which current image we need to show
 
if(direction == "next") {
if(direction == "next") {
currentImg++;
currentImg++;
Line 51: Line 41:
}
}
}
}
-
       
 
-
// Check which container we need to use
 
var currentContainer = activeContainer;
var currentContainer = activeContainer;
if(activeContainer == 1) {
if(activeContainer == 1) {
Line 59: Line 47:
activeContainer = 1;
activeContainer = 1;
}
}
-
 
showImage(photos[currentImg - 1], currentContainer, activeContainer);
showImage(photos[currentImg - 1], currentContainer, activeContainer);
-
 
};
};
Line 67: Line 53:
var showImage = function(photoObject, currentContainer, activeContainer) {
var showImage = function(photoObject, currentContainer, activeContainer) {
animating = true;
animating = true;
-
 
-
// Make sure the new container is always on the background
 
currentZindex--;
currentZindex--;
-
 
-
// Set the background image of the new active container
 
$("#headerimg" + activeContainer).css({
$("#headerimg" + activeContainer).css({
"background-image" : "url(" + photoObject.image + ")",
"background-image" : "url(" + photoObject.image + ")",
Line 77: Line 59:
"z-index" : currentZindex
"z-index" : currentZindex
});
});
-
 
-
// Fade out the current container
 
-
// and display the header text when animation is complete
 
$("#headerimg" + currentContainer).fadeOut(function() {
$("#headerimg" + currentContainer).fadeOut(function() {
setTimeout(function() {
setTimeout(function() {
Line 87: Line 66:
};
};
-
var stopAnimation = function() {
 
-
// Change the background image to "play"
 
-
$("#control").css({ "background-image" : "url(images/btn_play.png)" });
 
-
 
-
// Clear the interval
 
-
clearInterval(interval);
 
-
};
 
-
 
-
// We should statically set the first image
 
navigate("next");
navigate("next");
-
 
-
// Start playing the animation
 
interval = setInterval(function() {
interval = setInterval(function() {
navigate("next");
navigate("next");
}, slideshowSpeed);
}, slideshowSpeed);
-
 
});
});
 +
 +
/*
 +
* Author:      Marco Kuiper (http://www.marcofolio.net/)
 +
*/
 +
-->
-->
</script>
</script>
Line 437: Line 409:
         <script type="text/javascript">
         <script type="text/javascript">
             $(function() {
             $(function() {
-
/**
 
-
* for each menu element, on mouseenter,
 
-
* we enlarge the image, and show both sdt_active span and
 
-
* sdt_wrap span. If the element has a sub menu (sdt_box),
 
-
* then we slide it - if the element is the last one in the menu
 
-
* we slide it to the left, otherwise to the right
 
-
*/
 
                 $('#sdt_menu > li').bind('mouseenter',function(){
                 $('#sdt_menu > li').bind('mouseenter',function(){
var $elem = $(this);
var $elem = $(this);
Line 457: Line 422:
'height':'170px',
'height':'170px',
'left':'0px'
'left':'0px'
-
},400,'easeOutBack')
+
},200,'easeOutBack')
.andSelf()
.andSelf()
.find('.sdt_wrap')
.find('.sdt_wrap')

Revision as of 21:29, 27 June 2011


Retrieved from "http://2011.igem.org/Team:Brown-Stanford/Templates/Main"