panikweb_templates/templates/combo/gallerycell.html

   1 {% load thumbnail %}
   2 {% if cell.title %}
   3 <h2>{{ cell.title }}</h2>
   4 {% endif %}
   5 <div class="gallery" id="gallery-{{cell.id}}">
   6 {% for image in cell.image_set.all %}
   7   {% if forloop.first %}
   8 {% thumbnail image.image "640x480" crop="50% 25%" as im %}
   9 <div class="first">
  10 <img src="{{ im.url }}"/>
  11 <span>{% if image.title %}{{ image.title }}{% endif %}</span>
  12 </div>
  13 <div> {# extra opened <div> #}
  14 {% endthumbnail %}
  15   {% endif %}
  16 {% thumbnail image.image "60x60" crop="50% 25%" as im %}
  17 {% thumbnail image.image "640x480" crop="50% 25%" as im_large %}
  18 <span data-image-large="{{ im_large.url }}"><img src="{{ im.url }}"
  19         {% if image.title %} title="{{image.title}}" {% endif %}/></span>
  20 {% endthumbnail %}
  21 {% endthumbnail %}
  22
  23   {% if forloop.last %}
  24   </div> {# close extra <div> #}
  25   {% endif %}
  26 {% endfor %}
  27 </div>
  28 <script type="text/javascript">
  29 $(function() {
  30   var $gallery = $('#gallery-{{cell.id}}');
  31   $gallery.find('span').on('click', function() {
  32     $gallery.find('div.first img').attr('src', $(this).data('image-large'));
  33   });
  34 });
  35 </script>