Team:LMU-Munich/Slideshow Test

From 2012.igem.org

(Difference between revisions)
(slideshow playground)
(less flickering)
 
(3 intermediate revisions not shown)
Line 1: Line 1:
{{:Team:LMU-Munich/Templates/Page Header|File:Team-LMU_culture_tubes.resized.jpg}}
{{:Team:LMU-Munich/Templates/Page Header|File:Team-LMU_culture_tubes.resized.jpg}}
-
<div class="slideshow" style="height: 300px">
 
-
* [[File:LMU SynBio Day (5).JPG|700px]]
 
-
* [[File:LMU SynBio Day (6).JPG|700px]]
 
-
* [[File:LMU SynBio Day (9).JPG|700px]]
 
-
</div>
 
<html>
<html>
<style type="text/css">
<style type="text/css">
-
.slideshow {
+
#buttons {
-
position: relative;
+
position:relative;
-
overflow: hidden;
+
}
}
-
.slideshow li {
+
#buttons img {
-
display: none;
+
display: block;
position: absolute;
position: absolute;
-
left: 0;
 
top: 0;
top: 0;
 +
left: 0;
 +
z-index: -100;
}
}
-
</style>
 
-
<script type="text/javascript">
+
#buttons a img {
-
var divs = document.getElementsByTagName("div");
+
display: none;
-
for(var i = 0; i < divs.length; ++i) {
+
}
-
var slideshow = divs[i];
+
-
if(slideshow.getAttribute("class") != "slideshow") {
+
-
continue;
+
-
}
+
-
slideshow.lis = slideshow.getElementsByTagName("li");
+
#buttons a:hover img {
-
slideshow.current_li = 0;
+
display: block;
-
slideshow.next_li = 1;
+
}
-
slideshow.time = 0.0;
+
-
slideshow.timeout = null;
+
-
slideshow.set_timeout = function(timeout, callback) {
+
#buttons a {
-
if(slideshow.timeout != null) {
+
display: block;
-
window.clearTimeout(slideshow.timeout);
+
width: 50px;
-
}
+
height: 50px;
-
slideshow.timeout = window.setTimeout(callback, timeout);
+
position: absolute;
-
}
+
z-index 100;
 +
/* outline: 1px solid red; */
 +
}
 +
</style>
-
slideshow.timestep = function() {
+
<div id="buttons">
-
slideshow.time += 1./32.;
+
<br />
-
slideshow.lis[slideshow.next_li].style.left = slideshow.time * -100 + "%";
+
<br />
-
slideshow.lis[slideshow.current_li].style.left = (1. - slideshow.time) * 100 + "%";
+
<br />
-
slideshow.lis[slideshow.next_li].style.display = "block";
+
<br />
-
slideshow.lis[slideshow.next_li].z_index = "2";
+
<br />
-
slideshow.lis[slideshow.current_li].z_index = "1";
+
<br />
-
 
+
<br />
-
if(slideshow.time >= 1.) {
+
<br />
-
slideshow.lis[slideshow.current_li].style.display = "none";
+
<br />
-
slideshow.current_li = slideshow.next_li;
+
<br />
-
slideshow.next_li = slideshow.next_li + 1 >= slideshow.lis.length ? 0 : slideshow.next_li + 1;
+
<br />
-
slideshow.time = 0;
+
<br />
-
}
+
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<img alt="" src="http://wrtlprnft.ath.cx/igem2012_home.png">
 +
<a href="a" style="left: 276px; top: 40px; width: 271px; height:265px;"><img style="left: -276px; top: -40px" alt="" src="http://wrtlprnft.ath.cx/igem2012_home0.png"></a>
 +
<a href="b" style="left: 130px; top: 50px; width: 146px; height:145px;"><img style="left: -130px; top: -50px" alt="" src="http://wrtlprnft.ath.cx/igem2012_home1.png"></a>
 +
<a href="c" style="left: 166px; top: 196px; width: 110px; height:110px;"><img style="left: -166px; top: -196px" alt="" src="http://wrtlprnft.ath.cx/igem2012_home2.png"></a>
 +
<a href="d" style="left: 55px; top: 160px; width: 110px; height:110px;"><img style="left: -55px; top: -160px" alt="" src="http://wrtlprnft.ath.cx/igem2012_home3.png"></a>
 +
</div>
-
slideshow.set_timeout(80, slideshow.timestep);
 
-
}
 
-
 
-
slideshow.set_timeout(80, slideshow.timestep);
 
-
}
 
-
</script>
 
</html>
</html>
{{:Team:LMU-Munich/Templates/Page Footer}}
{{:Team:LMU-Munich/Templates/Page Footer}}

Latest revision as of 14:09, 8 September 2012

iGEM Ludwig-Maximilians-Universität München Beadzillus

Team-LMU culture tubes.resized.jpg

The LMU-Munich team is exuberantly happy about the great success at the World Championship Jamboree in Boston. Our project Beadzillus finished 4th and won the prize for the "Best Wiki" (with Slovenia) and "Best New Application Project".

IGEM HQ LMU prize.jpg

[ more news ]

Sporenfreunde

Retrieved from "http://2012.igem.org/Team:LMU-Munich/Slideshow_Test"