aboutsummaryrefslogtreecommitdiffstats
path: root/nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl
diff options
context:
space:
mode:
Diffstat (limited to 'nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl')
-rw-r--r--nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl93
1 files changed, 93 insertions, 0 deletions
diff --git a/nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl b/nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl
new file mode 100644
index 0000000..e3f9f05
--- /dev/null
+++ b/nikola/data/themes/bootstrap-jinja/templates/gallery.tmpl
@@ -0,0 +1,93 @@
+{# -*- 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 }}</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>&nbsp;{{ 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() }}
+<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 %}