1 files changed, 94 insertions, 0 deletions
diff --git a/nikola/data/themes/bootstrap3-jinja/templates/gallery.tmpl b/nikola/data/themes/bootstrap3-jinja/templates/gallery.tmpl
new file mode 100644
index 0000000..11382c3
--- /dev/null
+++ b/nikola/data/themes/bootstrap3-jinja/templates/gallery.tmpl
@@ -0,0 +1,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 }}</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>&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 %}