95 lines
3 KiB
Cheetah
95 lines
3 KiB
Cheetah
{# -*- 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 %}
|
|
<div class="page">
|
|
{{ 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 img-responsive" title="{{ image['title'] }}">
|
|
<img src="{{ image['url_thumb'] }}" alt="{{ image['title'] }}" /></a>
|
|
{% endfor %}
|
|
</ul>
|
|
</noscript>
|
|
{% endif %}
|
|
</div>
|
|
{% 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: 15,
|
|
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 shadow-z-3').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 %}
|