{% 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 %}