add gallery template

diff --git a/panikweb_templates/templates/combo/gallery.html b/panikweb_templates/templates/combo/gallery.html
new file mode 100644 (file)
index 0000000..b3c6bb9
--- /dev/null
+++ b/panikweb_templates/templates/combo/gallery.html
@@ -0,0 +1,33 @@
+{% load thumbnail %}
+{% if cell.title %}<h3>{{ cell.title }}</h3>{% endif %}
+<div class="gallery" id="gallery-{{cell.id}}">
+{% for image in cell.image_set.all %}
+  {% if forloop.first %}
+{% thumbnail image.image "640x480" crop="50% 25%" as im %}
+<div class="first" style="display: none;">
+<img src="{{ im.url }}"/>
+</div>
+<div>
+{% endthumbnail %}
+  {% endif %}
+{% thumbnail image.image "200x100" crop="50% 25%" as im %}
+{% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
+<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+        {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+{% endthumbnail %}
+{% endthumbnail %}
+{% endfor %}
+</div>
+</div>
+<script type="text/javascript">
+$(function() {
+  var $gallery = $('#gallery-{{cell.id}}');
+  $gallery.find('span').on('click', function() {
+    $gallery.find('div.first img').attr('src', $(this).data('image-large'));
+    $gallery.find('div.first').show('fade');
+  });
+  $gallery.find('div.first').on('click', function() {
+    $(this).toggle('fade');
+  });
+});
+</script>