summaryrefslogtreecommitdiffstats
path: root/themes/lv2/static
diff options
context:
space:
mode:
authorDavid Robillard <d@drobilla.net>2014-11-25 19:55:20 -0500
committerDavid Robillard <d@drobilla.net>2014-11-25 19:55:20 -0500
commit779991754aedbc26b71d1410d258e44bf754ac23 (patch)
tree615ce8f82b71453fa37bfc504843ef729f9baabe /themes/lv2/static
parente70619f71410c6b182c733779a29874be13be110 (diff)
downloadlv2site-779991754aedbc26b71d1410d258e44bf754ac23.tar.xz
Add screenshot gallery to main page.
Diffstat (limited to 'themes/lv2/static')
-rw-r--r--themes/lv2/static/css/slideshow.css38
-rw-r--r--themes/lv2/static/js/slideshow.js40
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();