URL Hashes

urbstudio/static/js/projects.js

@@ -12,6 +12,7 @@ $(function(){
         var project_id = $this.attr("data-id");
 //        doProjectLoading();
         $.getJSON("project_json", {'id': project_id}, function(data) {
+            location.hash = data.slug;
             $('#projectTitle').next().text(data.title);
             $('#projectSizeProgram').next().html(nl2br(data.size_program));
             $('#projectDesignStatement').next().html(nl2br(data.design_statement));
@@ -30,9 +31,21 @@ $(function(){
         }); 
     });
 
+
+    var hash = location.hash;
+    if (hash == '') {
         $('.projectThumb').eq(0).click();
+    } else {
+        var $thumb = $('#thumb_' + hash);
+        if ($thumb.length > 0) {
+            $thumb.click();
+        } else {
+            $('.projectThumb').eq(0).click();
+        }
+    }
 });
 
+
 function getA(image) {
     var $a = $('<a />').attr("href", "#");
     var $img = $('<img />').attr("src", image.url).appendTo($a);

urbstudio/templates/projects.html

@@ -78,7 +78,7 @@
     {% load thumbnail %}
     {% for p in projects %}
         {% thumbnail p.thumb_image "100x100" crop="center" as im %}
-        <li><img src="{{ im.url }}" data-id="{{ p.id }}" width="100" height="100" alt="{{ p.title }}" class="projectThumb" /></li>
+        <li><img id="thumb_{{ p.slug }}" src="{{ im.url }}" data-id="{{ p.id }}" width="100" height="100" alt="{{ p.title }}" class="projectThumb" /></li>
         {% endthumbnail %}
     {% endfor %}    
 </ul>