1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
{# -*- coding: utf-8 -*- #}
{% extends 'base.tmpl' %}
{% import 'comments_helper.tmpl' as comments with context %}
{% import 'crumbs.tmpl' as ui with context %}
{% block sourcelink %}{% endblock %}
{% block content %}
{{ ui.bar(crumbs) }}
{% if title %}
<h1>{{ title|e }}</h1>
{% endif %}
{% if post %}
<p>
{{ post.text() }}
</p>
{% endif %}
{% if folders %}
<ul>
{% for folder, ftitle in folders %}
<li><a href="{{ folder }}"><i class="glyphicon glyphicon-folder-open"></i> {{ ftitle }}</a></li>
{% endfor %}
</ul>
{% endif %}
<div id="gallery_container"></div>
{% if photo_array %}
<noscript>
<ul class="thumbnails">
{% for image in photo_array %}
<li><a href="{{ image['url'] }}" class="thumbnail image-reference" title="{{ image['title'] }}">
<img src="{{ image['url_thumb'] }}" alt="{{ image['title'] }}" /></a>
{% endfor %}
</ul>
</noscript>
{% endif %}
{% if site_has_comments and enable_comments %}
{{ comments.comment_form(None, permalink, title) }}
{% endif %}
{% endblock %}
{% block extra_head %}
{{ super() }}
<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">
<style type="text/css">
.image-block {
display: inline-block;
}
.flowr_row {
width: 100%;
}
</style>
{% endblock %}
{% block extra_js %}
<script src="/assets/js/flowr.plugin.js"></script>
<script>
jsonContent = {{ photo_array_json }};
$("#gallery_container").flowr({
data : jsonContent,
height : {{ thumbnail_size }}*.6,
padding: 5,
rows: -1,
render : function(params) {
// Just return a div, string or a dom object, anything works fine
img = $("<img />").attr({
'src': params.itemData.url_thumb,
'width' : params.width,
'height' : params.height
}).css('max-width', '100%');
link = $( "<a></a>").attr({
'href': params.itemData.url,
'class': 'image-reference'
});
div = $("<div />").addClass('image-block').attr({
'title': params.itemData.title,
'data-toggle': "tooltip",
});
link.append(img);
div.append(link);
div.hover(div.tooltip());
return div;
},
itemWidth : function(data) { return data.size.w; },
itemHeight : function(data) { return data.size.h; },
complete : function(params) {
if( jsonContent.length > params.renderedItems ) {
nextRenderList = jsonContent.slice( params.renderedItems );
}
}
});
$("a.image-reference").colorbox({rel:"gal", maxWidth:"100%",maxHeight:"100%",scalePhotos:true});
</script>
{% endblock %}
|
