2 {% if cell.title %}<h3>{{ cell.title }}</h3>{% endif %}
3 <div class="gallery" id="gallery-{{cell.id}}">
4 {% for image in cell.image_set.all %}
6 {% thumbnail image.image "640x480" crop="50% 25%" as im %}
7 <div class="first" style="display: none;">
8 <img src="{{ im.url }}"/>
13 {% thumbnail image.image "200x100" crop="50% 25%" as im %}
14 {% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
15 <span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
16 {% if image.title %} title="{{image.title}}" {% endif %}/></span>
22 <script type="text/javascript">
24 var $gallery = $('#gallery-{{cell.id}}');
25 $gallery.find('span').on('click', function() {
26 $gallery.find('div.first img').attr('src', $(this).data('image-large'));
27 $gallery.find('div.first').show('fade');
29 $gallery.find('div.first').on('click', function() {
30 $(this).toggle('fade');