diff options
| author | David Robillard <d@drobilla.net> | 2014-11-25 19:55:20 -0500 |
|---|---|---|
| committer | David Robillard <d@drobilla.net> | 2014-11-25 19:55:20 -0500 |
| commit | 779991754aedbc26b71d1410d258e44bf754ac23 (patch) | |
| tree | 615ce8f82b71453fa37bfc504843ef729f9baabe /themes | |
| parent | e70619f71410c6b182c733779a29874be13be110 (diff) | |
| download | lv2site-779991754aedbc26b71d1410d258e44bf754ac23.tar.xz | |
Add screenshot gallery to main page.
Diffstat (limited to 'themes')
| -rw-r--r-- | themes/lv2/static/css/slideshow.css | 38 | ||||
| -rw-r--r-- | themes/lv2/static/js/slideshow.js | 40 | ||||
| -rw-r--r-- | themes/lv2/templates/base.html | 18 | ||||
| -rw-r--r-- | themes/lv2/templates/page.html | 12 |
4 files changed, 100 insertions, 8 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(); diff --git a/themes/lv2/templates/base.html b/themes/lv2/templates/base.html index a3ca785..00f066d 100644 --- a/themes/lv2/templates/base.html +++ b/themes/lv2/templates/base.html @@ -1,13 +1,15 @@ <!DOCTYPE html> <html lang="en"> <head> - <title>{% block title %}{{ SITENAME }}{%endblock%}</title> - <meta charset="utf-8" /> - <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" /> - <link href="{{ SITEURL }}/{{ FEED }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" /> - {% if FEED_RSS %} - <link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" /> - {% endif %} + {% block head %} + <title>{% block title %}{{ SITENAME }}{%endblock%}</title> + <meta charset="utf-8" /> + <link rel="stylesheet" href="{{ SITEURL }}/theme/css/{{ CSS_FILE }}" type="text/css" /> + <link href="{{ SITEURL }}/{{ FEED }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} ATOM Feed" /> + {% if FEED_RSS %} + <link href="{{ SITEURL }}/{{ FEED_RSS }}" type="application/atom+xml" rel="alternate" title="{{ SITENAME }} RSS Feed" /> + {% endif %} + {% endblock %} </head> <body> @@ -23,7 +25,7 @@ {% endif %} </a> </li> - + {% for title, link in MENUITEMS %} <li><a href="{{ link }}">{{ title }}</a></li> {% endfor %} diff --git a/themes/lv2/templates/page.html b/themes/lv2/templates/page.html index 33f6aca..762dd27 100644 --- a/themes/lv2/templates/page.html +++ b/themes/lv2/templates/page.html @@ -1,4 +1,8 @@ {% extends "base.html" %} +{% block head %} + {{ super() }} + <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/slideshow.css" /> +{% endblock %} {% block title %} {% if page.title %} {{ page.title }} @@ -13,4 +17,12 @@ {% endif %} </header> {{ page.content }} + {% if page.gallery %} + <div id="slideshow"> + {% for photo_set in page.gallery.photos %} + <img src="{{ SITEURL }}/{{ photo_set['slider'].src }}" alt="{{ photo_set['slider'].src }}" /> + {% endfor %} + </div> + <script type="text/javascript" src="{{ SITEURL }}/theme/js/slideshow.js"></script> + {% endif %} {% endblock %} |