Team:Brown-Stanford/Templates/Main

From 2011.igem.org

(Difference between revisions)
Line 5: Line 5:
<script type="text/javascript">
<script type="text/javascript">
<!--  
<!--  
-
/* Script taken from leemessenger.co.uk - Please do not remove this line */
 
-
function ChangeCSSBgImg() {
+
/*
-
if (!document.getElementById) return false;
+
* Author:      Marco Kuiper (http://www.marcofolio.net/)
 +
*/
-
var MyElement = "#random" //The ID of the element you want to change
+
// Speed of the automatic slideshow
 +
var slideshowSpeed = 6000;
-
if (!document.getElementById(MyElement)) return false;
+
// Variable to store the images we need to set as background
 +
// which also includes some text and url's.
 +
var photos = [ {
 +
"url" : "https://static.igem.org/mediawiki/2011/a/a1/Brown-Stanford_BG1.jpg",
 +
}, {
 +
"url" : "https://static.igem.org/mediawiki/2011/8/81/Brown-Stanford_BG2.jpg",
 +
}, {
 +
"url" : "https://static.igem.org/mediawiki/2011/a/a9/Brown-Stanford_BG3.jpg",
 +
}, {
 +
"url" : "https://static.igem.org/mediawiki/2011/f/fd/Brown-Stanford_BG4.jpg",
 +
}, {
 +
"url" : "https://static.igem.org/mediawiki/2011/4/4c/Brown-Stanford_BG5.jpg",
 +
}, {
 +
"url" : "https://static.igem.org/mediawiki/2011/7/7f/Brown-Stanford_BG6.jpg",
 +
}
 +
];
-
var random_images = new Array ();
 
-
random_images[0] = "https://static.igem.org/mediawiki/2011/a/a1/Brown-Stanford_BG1.jpg"
 
-
random_images[1] = "https://static.igem.org/mediawiki/2011/8/81/Brown-Stanford_BG2.jpg"
 
-
random_images[2] = "https://static.igem.org/mediawiki/2011/a/a9/Brown-Stanford_BG3.jpg"
 
-
random_images[3] = "https://static.igem.org/mediawiki/2011/f/fd/Brown-Stanford_BG4.jpg"
 
-
random_images[4] = "https://static.igem.org/mediawiki/2011/4/4c/Brown-Stanford_BG5.jpg"
 
-
random_images[5] = "https://static.igem.org/mediawiki/2011/7/7f/Brown-Stanford_BG6.jpg"
 
-
var $header = document.getElementById(MyElement);
 
-
var $backgroundurl = $header.style.backgroundImage;
 
-
var ImgURL = "url(" + random_images[rand(random_images.length)] + ")";
 
-
if ($backgroundurl != ImgURL) {
+
$(document).ready(function() {
-
$header.style.backgroundImage = ImgURL;
+
-
}
+
var activeContainer = 1;
-
 
+
var currentImg = 0;
-
movement = setTimeout("ChangeCSSBgImg()",140);
+
var animating = true;
-
}
+
var navigate = function(currentImg) {
-
 
+
if(animating) {
-
/* random number generator */
+
return;
-
function rand(n) {
+
}
-
    return ( Math.floor ( Math.random ( ) * n ) );
+
-
}
+
// Check which container we need to use
-
 
+
var currentContainer = activeContainer;
-
/* Custom onload function */
+
if(activeContainer == 1) {
-
 
+
activeContainer = 2;
-
function addLoadEvent(func) {
+
} else {
-
    var oldonload = window.onload;
+
activeContainer = 1;
-
        if (typeof window.onload != 'function') {
+
}
-
        window.onload = func;
+
-
        } else {
+
showImage(photos[currentImg], currentContainer, activeContainer);
-
        window.onload = function() {
+
-
    oldonload();
+
};
-
func();
+
-
}
+
var currentZindex = -1;
-
}
+
var showImage = function(photoObject, currentContainer, activeContainer) {
-
}
+
animating = true;
-
 
+
-
/* trigger onload */
+
// Make sure the new container is always on the background
-
 
+
currentZindex--;
-
addLoadEvent(ChangeCSSBgImg);
+
 +
// Set the background image of the new active container
 +
$("#headerimg" + activeContainer).css({
 +
"background-image" : "url(" + photoObject.image + ")",
 +
"display" : "block",
 +
"z-index" : currentZindex
 +
                        "background-repeat" : "no-repeat"
 +
                        "background-attachment" : "fixed"
 +
                        "background-position" : "center top"
 +
});
 +
 +
 +
 +
// Fade out the current container
 +
// and display the header text when animation is complete
 +
$("#headerimg" + currentContainer).fadeOut(function() {
 +
setTimeout(function() {
 +
animating = false;
 +
}, 500);
 +
});
 +
};
 +
 +
// We should statically set the first image
 +
navigate("next");
 +
 +
// Start playing the animation
 +
interval = setInterval(function() {
 +
navigate("next");
 +
}, slideshowSpeed);
 +
 +
});
-->
-->
</script>
</script>
Line 695: Line 731:
</ul> </li>-->
</ul> </li>-->
 +
<div id="headerimgs">
 +
<div id="headerimg1" class="headerimg"></div>
 +
<div id="headerimg2" class="headerimg"></div>
 +
</div>
 +
<div class="content">
<div class="content">

Revision as of 22:44, 9 June 2011

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