Add screenshot gallery to main page.

2 files changed, 78 insertions, 0 deletions

diff --git a/themes/lv2/static/css/slideshow.css b/themes/lv2/static/css/slideshow.css
new file mode 100644
index 0000000..7fe664d
--- /dev/null
+++ b/themes/lv2/static/css/slideshow.css
@@ -0,0 +1,38 @@
+#slideshow {
+    background-color: #000;
+    border: 3px solid #000;
+    border-radius: 6px;
+    display: inline-block;
+    height: 20em;
+    line-height: 20em;
+    margin: 1em;
+	margin-left: auto;
+	margin-right: auto;
+	position: relative;
+    text-align: right;
+    vertical-align: middle;
+    width: 20em;
+}
+
+#slideshow img {
+    left: 0;
+    width: 100%;
+    height: auto;
+    max-height: 100%;
+	opacity: 0;
+	position: absolute;
+    text-align: center;
+	transition-duration: 1s;
+	transition-property: opacity;
+    vertical-align: middle;
+}
+
+#slideshow .fadein {
+	opacity: 1.0;
+	transform-origin: bottom left;
+}
+
+#slideshow .fadeout {
+	opacity: 0.0;
+	transform-origin: bottom left;
+}
diff --git a/themes/lv2/static/js/slideshow.js b/themes/lv2/static/js/slideshow.js
new file mode 100644
index 0000000..d9fb9c5
--- /dev/null
+++ b/themes/lv2/static/js/slideshow.js
@@ -0,0 +1,40 @@
+function getPreviousNode(n) {
+	var p = n.previousSibling;
+	while (p && p.nodeType !== 1) {
+		p = p.previousSibling;
+	}
+	return p;
+}
+
+function startSlideShow() {
+	var slideshow = document.getElementById("slideshow"),
+		imgs      = slideshow.getElementsByTagName("img"),
+		n         = imgs.length,
+		m         = Math.floor((Math.random() * n)),
+		pred      = getPreviousNode(slideshow);
+
+	// Shrink width of predecessor so gallery fits beside it
+	if (pred) {
+		pred.style.width   = "50%";
+		pred.style.display = "inline-block";
+	}
+
+	// Start transition of initial image
+	imgs[m].className = "fadein";
+	m                 = (m + 1) % n;
+
+	function tick() {
+		// Fade out the previous image, and fade in the next
+		var prev = (m + n - 1) % n,
+			next = (m + 1) % n;
+
+		imgs[prev].className = "";
+		imgs[m].className    = "fadeout";
+		imgs[next].className = "fadein";
+
+		m = (m + 1) % n;
+	}
+	window.setInterval(tick, 4000);
+}
+
+startSlideShow();