{% extends "layout.html" %}
{% block content %}
<LINK href="{{ url_for('static', filename='gallery/css/blueimp-gallery.min.css')}}" rel="stylesheet" type="text/css">

<script src="{{ url_for('static', filename='gallery/js/blueimp-gallery.min.js')}}"></script>
<style>
  #links a {
  margin-left: -2px;
  margin-right:-2px;
  }
</style>

      <h1>{{post.title}}</h1>

{{ post.html|safe }}

      <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>

      <div id="links">
	{% for d in filelists.image_list %}
	<a href="{{d.url}}">
          <img src="{{d.url}}"  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 %}