--- a/src/iconolab/templates/iconolab/detail_item.html Fri Jul 22 17:33:48 2016 +0200
+++ b/src/iconolab/templates/iconolab/detail_item.html Mon Jul 25 16:41:17 2016 +0200
@@ -9,7 +9,7 @@
{% block content %}
<div class="row">
<div class="col-md-6">
- {% for image in item.images.all %}
+ {% for image in item.images.all|dictsort:"pk" %}
<div id="img-{{image.image_guid}}" class="item-detail-image-block {% if forloop.first %}selected{% endif %}">
{% thumbnail image.media "500x500" crop=False as im %}
<img src="{{ im.url }}" width="{{ im.width }}" height="{{ im.height }}">
@@ -45,20 +45,21 @@
{% block footer_js %}
<script>
- $(".item-detail-image-block:not(.selected)").hide()
- $(".image-annotations-list").hide()
+ $(".item-detail-image-block:not(.selected)").hide();
+ $(".image-annotations-list").hide();
var initialSelectedID = /img\-([0-9a-z\-]+)/.exec($(".item-detail-image-block.selected").attr("id"))[1];
- $(".item-image-thumbnail#thumb-"+initialSelectedID).hide()
- $(".image-annotations-list#annotations-"+initialSelectedID).show()
+ $(".item-image-thumbnail#thumb-"+initialSelectedID).hide();
+ $(".image-annotations-list#annotations-"+initialSelectedID).show();
$(".item-image-thumbnail").on("click", function(e){
imageID = /thumb\-([0-9a-z\-]+)/.exec($(this).attr("id"))[1];
- $(".item-detail-image-block").hide()
- $(".item-detail-image-block#img-"+imageID).show()
- $(".item-detail-image-block#img-"+imageID).addClass("selected")
- $(".item-image-thumbnail").show()
- $(".item-image-thumbnail#thumb-"+imageID).hide()
- $(".image-annotations-list").hide()
- $(".image-annotations-list#annotations-"+imageID).show()
+ $(".item-detail-image-block").hide();
+ $(".item-detail-image-block").removeClass("selected");
+ $(".item-detail-image-block#img-"+imageID).show();
+ $(".item-detail-image-block#img-"+imageID).addClass("selected");
+ $(".item-image-thumbnail").show();
+ $(".item-image-thumbnail#thumb-"+imageID).hide();
+ $(".image-annotations-list").hide();
+ $(".image-annotations-list#annotations-"+imageID).show();
})
</script>
{% endblock %}
\ No newline at end of file