gallery/templates/combo/gallery.html

   1 {% load thumbnail %}
   2 <div class="gallery" id="gallery-{{cell.id}}">
   3 {% for image in cell.image_set.all %}
   4   {% if forloop.first %}
   5 {% thumbnail image.image "640x480" crop="50% 25%" as im %}
   6 <div class="first">
   7 <img src="{{ im.url }}"/>
   8 <span>{% if image.title %}{{ image.title }}{% endif %}</span>
   9 </div>
  10 <div>
  11 {% endthumbnail %}
  12   {% endif %}
  13 {% thumbnail image.image "60x60" 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>
  17 {% endthumbnail %}
  18 {% endthumbnail %}
  19 {% endfor %}
  20 </div>
  21 </div>
  22 <script type="text/javascript">
  23 $(function() {
  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   });
  28 });
  29 </script>