gallery template

2017-02-19 00:40:24 +01:00
parent fcfc04a594
commit 539646fd37
4 changed files with 111 additions and 37 deletions
--- a/templates/gallery.html
+++ b/templates/gallery.html
@@ -0,0 +1,44 @@
+{% extends "layout.html" %}
+{% block content %}
+
+<link rel="stylesheet" href="/Gallery/css/blueimp-gallery.min.css">
+<script src="/Gallery/js/blueimp-gallery.min.js"></script>
+<style>
+  #links a {
+  margin-left: -2px;
+  margin-right:-2px;
+  }
+  </style>
+<div id="blueimp-gallery" class="blueimp-gallery">
+    <div class="slides"></div>
+    <h3 class="title"></h3>
+    <a class="prev">‹</a>
+    <a class="next">›</a>
+    <a class="close">×</a>
+    <a class="play-pause"></a>
+    <ol class="indicator"></ol>
+</div>
+
+      <h1>{{post.title}}</h1>
+      <div id="links">
+	{% for d in il %}
+	<a href="/{{pth}}/{{d}}">
+          <img src="/{{pth}}/{{d}}"  width="80" height="80" alt="">
+	</a>
+	{% endfor %}
+      </div>
+    </div>
+  </div>
+</div>
+
+<script>
+    document.getElementById('links').onclick = function (event) {
+    event = event || window.event;
+    var target = event.target || event.srcElement,
+    link = target.src ? target.parentNode : target,
+    options = {index: link, event: event},
+    links = this.getElementsByTagName('a');
+    blueimp.Gallery(links, options);
+    };
+</script>
+{% endblock %}