{% load thumbnail %}
<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">
<img src="{{ im.url }}"/>
<span>{% if image.title %}{{ image.title }}{% endif %}</span>
</div>
<div> {# extra opened <div> #}
{% endthumbnail %}
  {% endif %}
{% thumbnail image.image "60x60" 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 %}

  {% if forloop.last %}
  </div> {# close extra <div> #}
  {% endif %}
{% endfor %}
</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>