Team:LMU-Munich/Slideshow Test

From 2012.igem.org

(Difference between revisions)
(slideshow playground)
(slideshow in a working state :-))
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]]
+
<div class="slideshow" style="height: 488px; width: 650px;">
-
* [[File:LMU SynBio Day (6).JPG|700px]]
+
* [[File:LMU SynBio Day (5).JPG|650px]]
-
* [[File:LMU SynBio Day (9).JPG|700px]]
+
* [[File:LMU SynBio Day (6).JPG|650px]]
 +
* [[File:LMU SynBio Day (9).JPG|650px]]
</div>
</div>
Line 15: Line 16:
.slideshow li {
.slideshow li {
-
display: none;
+
display: block;
position: absolute;
position: absolute;
-
left: 0;
+
left: -100%;
top: 0;
top: 0;
 +
}
 +
 +
.slideshow div.antilink {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
}
 +
 +
.slideshow div.next {
 +
position: absolute;
 +
width: 0;
 +
height: 0;
 +
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>
Line 33: Line 52:
slideshow.current_li = 0;
slideshow.current_li = 0;
slideshow.next_li = 1;
slideshow.next_li = 1;
-
slideshow.time = 0.0;
+
slideshow.time = 1.;
slideshow.timeout = null;
slideshow.timeout = null;
 +
slideshow.fast = false;
slideshow.set_timeout = function(timeout, callback) {
slideshow.set_timeout = function(timeout, callback) {
Line 40: Line 60:
window.clearTimeout(slideshow.timeout);
window.clearTimeout(slideshow.timeout);
}
}
 +
slideshow.last_time = (new Date()).getTime();
slideshow.timeout = window.setTimeout(callback, timeout);
slideshow.timeout = window.setTimeout(callback, timeout);
}
}
slideshow.timestep = function() {
slideshow.timestep = function() {
-
slideshow.time += 1./32.;
+
if(slideshow.time == 0) {
-
slideshow.lis[slideshow.next_li].style.left = slideshow.time * -100 + "%";
+
dt = 20;
-
slideshow.lis[slideshow.current_li].style.left = (1. - slideshow.time) * 100 + "%";
+
} else {
-
slideshow.lis[slideshow.next_li].style.display = "block";
+
var time = (new Date()).getTime();
-
slideshow.lis[slideshow.next_li].z_index = "2";
+
var dt = time - slideshow.last_time;
-
slideshow.lis[slideshow.current_li].z_index = "1";
+
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.) {
if(slideshow.time >= 1.) {
-
slideshow.lis[slideshow.current_li].style.display = "none";
+
// slideshow.lis[slideshow.current_li].style.display = "none";
slideshow.current_li = slideshow.next_li;
slideshow.current_li = slideshow.next_li;
slideshow.next_li = slideshow.next_li + 1 >= slideshow.lis.length ? 0 : slideshow.next_li + 1;
slideshow.next_li = slideshow.next_li + 1 >= slideshow.lis.length ? 0 : slideshow.next_li + 1;
slideshow.time = 0;
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(80, slideshow.timestep);
 
}
}
-
slideshow.set_timeout(80, slideshow.timestep);
+
slideshow.set_timeout(0, slideshow.timestep);
}
}
</script>
</script>

Revision as of 10:48, 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