93 lines
2.6 KiB
Cheetah
93 lines
2.6 KiB
Cheetah
## -*- coding: utf-8 -*-
|
|
<%inherit file="base.tmpl"/>
|
|
<%namespace name="comments" file="comments_helper.tmpl"/>
|
|
<%namespace name="ui" file="crumbs.tmpl" import="bar"/>
|
|
<%block name="sourcelink"></%block>
|
|
|
|
<%block name="content">
|
|
${ui.bar(crumbs)}
|
|
%if title:
|
|
<h1>${title}</h1>
|
|
%endif
|
|
%if post:
|
|
<p>
|
|
${post.text()}
|
|
</p>
|
|
%endif
|
|
%if folders:
|
|
<ul>
|
|
% for folder, ftitle in folders:
|
|
<li><a href="${folder}"><i class="icon-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
|
|
</%block>
|
|
|
|
<%block name="extra_head">
|
|
${parent.extra_head()}
|
|
<style type="text/css">
|
|
.image-block {
|
|
display: inline-block;
|
|
}
|
|
.flowr_row {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
</%block>
|
|
|
|
|
|
<%block name="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>
|
|
</%block>
|