Team:LMU-Munich/Slideshow Test

From 2012.igem.org

(Difference between revisions)
(slideshow in a working state :-))
(less flickering)
 
(2 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: 488px; width: 650px;">
 
-
* [[File:LMU SynBio Day (5).JPG|650px]]
 
-
* [[File:LMU SynBio Day (6).JPG|650px]]
 
-
* [[File:LMU SynBio Day (9).JPG|650px]]
 
-
</div>
 
<html>
<html>
<style type="text/css">
<style type="text/css">
-
.slideshow {
+
#buttons {
-
position: relative;
+
position:relative;
-
overflow: hidden;
+
}
}
-
.slideshow li {
+
#buttons img {
display: block;
display: block;
position: absolute;
position: absolute;
-
left: -100%;
 
top: 0;
top: 0;
 +
left: 0;
 +
z-index: -100;
}
}
-
.slideshow div.antilink {
+
#buttons a img {
-
position: absolute;
+
display: none;
-
width: 100%;
+
-
height: 100%;
+
}
}
-
.slideshow div.next {
+
#buttons a:hover img {
 +
display: block;
 +
}
 +
 
 +
#buttons a {
 +
display: block;
 +
width: 50px;
 +
height: 50px;
position: absolute;
position: absolute;
-
width: 0;
+
z-index 100;
-
height: 0;
+
/* outline: 1px solid red; */
-
border-left: 20px solid /*#7b609b*/ white;
+
-
border-top: 20px solid transparent;
+
-
border-bottom: 20px solid transparent;
+
-
right: 20px;
+
-
top: 50%;
+
-
margin-top: -20px;
+
}
}
</style>
</style>
-
<script type="text/javascript">
+
<div id="buttons">
-
var divs = document.getElementsByTagName("div");
+
<br />
-
for(var i = 0; i < divs.length; ++i) {
+
<br />
-
var slideshow = divs[i];
+
<br />
-
if(slideshow.getAttribute("class") != "slideshow") {
+
<br />
-
continue;
+
<br />
-
}
+
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<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.lis = slideshow.getElementsByTagName("li");
 
-
slideshow.current_li = 0;
 
-
slideshow.next_li = 1;
 
-
slideshow.time = 1.;
 
-
slideshow.timeout = null;
 
-
slideshow.fast = false;
 
-
 
-
slideshow.set_timeout = function(timeout, callback) {
 
-
if(slideshow.timeout != null) {
 
-
window.clearTimeout(slideshow.timeout);
 
-
}
 
-
slideshow.last_time = (new Date()).getTime();
 
-
slideshow.timeout = window.setTimeout(callback, timeout);
 
-
}
 
-
 
-
slideshow.timestep = function() {
 
-
if(slideshow.time == 0) {
 
-
dt = 20;
 
-
} else {
 
-
var time = (new Date()).getTime();
 
-
var dt = time - slideshow.last_time;
 
-
slideshow.last_time = time;
 
-
}
 
-
slideshow.time += dt / (slideshow.fast ? 1000. : 3000.);
 
-
if(slideshow.time >= 1.) {
 
-
slideshow.time = 1.;
 
-
}
 
-
var anim_time = .5 - .5 * Math.cos(slideshow.time * 3.141);
 
-
slideshow.lis[slideshow.current_li].style.left = anim_time * -100 + "%";
 
-
slideshow.lis[slideshow.next_li].style.left = (1. - anim_time) * 100 + "%";
 
-
 
-
if(slideshow.time >= 1.) {
 
-
// slideshow.lis[slideshow.current_li].style.display = "none";
 
-
slideshow.current_li = slideshow.next_li;
 
-
slideshow.next_li = slideshow.next_li + 1 >= slideshow.lis.length ? 0 : slideshow.next_li + 1;
 
-
slideshow.time = 0;
 
-
slideshow.fast = false;
 
-
// alert(slideshow.next_li);
 
-
// alert(slideshow.current_li);
 
-
slideshow.set_timeout(5000, slideshow.timestep);
 
-
// slideshow.lis[slideshow.next_li].style.display = "block";
 
-
// slideshow.lis[slideshow.next_li].z_index = "2";
 
-
// slideshow.lis[slideshow.current_li].z_index = "1";
 
-
} else {
 
-
slideshow.set_timeout(20, slideshow.timestep);
 
-
}
 
-
var antilink = document.createElement("div");
 
-
antilink.setAttribute("class", "antilink");
 
-
slideshow.appendChild(antilink);
 
-
var div = document.createElement("div");
 
-
div.setAttribute("class", "next");
 
-
slideshow.appendChild(div);
 
-
div.onclick = function() {
 
-
slideshow.set_timeout(0, slideshow.timestep);
 
-
slideshow.fast = true;
 
-
}
 
-
}
 
-
 
-
slideshow.set_timeout(0, 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"