--- /dev/null
+function gallery(element) {
+ var element_id = '#' + $(element).attr('id');
+ $(element).sortable({
+ items: '> li',
+ containment: 'parent',
+ placeholder: 'empty-image',
+ update: function(event, ui) {
+ var new_order = $(element).find('> li').map(function() { return $(this).data('object-id'); }).get().join();
+ $.ajax({
+ url: $(element).data('order-url'),
+ data: {'new-order': new_order},
+ success: function(data, status) {
+ $(element).replaceWith($(data).find(element_id));
+ gallery($(element_id));
+ }
+ });
+ }
+ });
+ $('.image-delete').on('click', function() {
+ $.ajax({
+ url: $(this).attr('href'),
+ success: function(data, status) {
+ $(element).replaceWith($(data).find(element_id));
+ gallery($(element_id));
+ }
+ });
+ return false;
+ });
+};
{% 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 %}
-<div class="first" style="display: none;">
-<img src="#"/>
-<span class="gallery-legend"></span>
+{% thumbnail image.image "640x480" crop="50% 25%" as im %}
+<div class="first">
+<img src="{{ im.url }}"/>
+<span>{% if image.title %}{{ image.title }}{% endif %}</span>
</div>
-<div>
- {% endif %}
-{% thumbnail image.image "200x100" crop="50% 25%" as im %}
-{% if cell.slug == 'portrait' %}
-{% thumbnail image.image "480x640" crop="50% 25%" as im_large %}
-<span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
- class="portrait" {% if image.title %} title="{{image.title}}" {% endif %}/></span>
+<div> {# extra opened <div> #}
{% endthumbnail %}
-{% else %}
+ {% endif %}
+{% thumbnail image.image "60x60" crop="50% 25%" as im %}
{% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
-<span class="image" data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
+<span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
{% if image.title %} title="{{image.title}}" {% endif %}/></span>
{% endthumbnail %}
-
-{% endif %}
{% endthumbnail %}
+
+ {% if forloop.last %}
+ </div> {# close extra <div> #}
+ {% endif %}
{% 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'));
+ });
+});
+</script>