projects come from back-end

urbstudio/settings.py

@@ -7,6 +7,7 @@ PROJECT_ROOT = os.path.dirname(__file__)
 LOCAL_DEVELOPMENT = True
 DEBUG = True
 TEMPLATE_DEBUG = DEBUG
+JSON_DEBUG = True
 
 ADMINS = (
     # ('Your Name', 'your_email@domain.com'),
@@ -98,6 +99,7 @@ INSTALLED_APPS = (
     'django.contrib.admin',
     'urb',
     'django_extensions',
+    'sorl.thumbnail',
     # Uncomment the next line to enable the admin:
     # 'django.contrib.admin',
     # Uncomment the next line to enable admin documentation:

urbstudio/templates/projects.html

@@ -18,7 +18,31 @@
 				pause: 4000,
 				hoverPause: true
 			});
+
+            $('.projectThumb').click(function() {
+//                alert("hi");
+                var $this = $(this);
+                if ($this.hasClass("selected")) {
+                    return false;     
+                }
+                $('.selected').removeClass("selected");
+                $this.addClass("selected");
+                var project_id = $this.attr("data-id");
+                $.getJSON("project_json", {'id': project_id}, function(data) {
+                    $('#projectTitle').next().text(data.title);
+                    $('#projectSizeProgram').next().html(nl2br(data.size_program));
+                    $('#projectDesignStatement').next().html(nl2br(data.design_statement));
+                    $('#projectExtraText').next().html(nl2br(data.extra_text));
+                }); 
+            });
+
 		});
+
+ 
+
+        function nl2br(str) {
+            return str.replace("\n", "<br />");
+        }
 </script>
 
 <script type="text/javascript">
@@ -58,18 +82,18 @@
 	</div>
             
                 <div id="textGallery">
-                	<p class="orange">Project</p>
+                	<p class="orange" id="projectTitle">Project</p>
                     <p>Dummy text</p>
                     <br>
                     
-                    <p class="orange">Size & Program</p>
+                    <p class="orange" id="projectSizeProgram">Size & Program</p>
                     <p>Dummy text</p>
                     <br>
                     
-                    <p class="orange">Design Statement</p>
+                    <p class="orange" id="projectDesignStatement">Design Statement</p>
                     <p>Dummy text</p>
                     <br>
-                    
+<!--                    
                     <p class="orange">Start Date ???</p>
                     <p>Dummy text</p>
                     <br>
@@ -81,18 +105,25 @@
                     <p class="orange">Location ???</p>
                     <p>Dummy text</p>
                     <br>
-                    
+-->                    
-                    <p class="orange">Content Block ???</p>
+                    <p class="orange" id="projectExtraText">Content Block ???</p>
                     <p>Dummy text Dummy text Dummy text</p>
                     <br>
 
                 </div><!--TEXT GALLERY CLOSING-->
-                <!--</div><!--PROJECT GALLERY CLOSING-->
+                <!--</div> --><!--PROJECT GALLERY CLOSING-->
              </div>   
                 <div class="clear">
                 </div><!--CLEAR CLOSING-->
 
 <ul id="scroller"><!-- logo jutting right on 1024 -->
+    {% 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" class="projectThumb" /></li>
+        {% endthumbnail %}
+    {% endfor %}    
+<!--
 	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
 	<li><img src="/static/images/dummy2.jpg" width="100" height="100" class="selected"></li>
 	<li><img src="/static/images/dummy3.jpg" width="100" height="100" class="selected"></li>
@@ -110,9 +141,8 @@
 	<li><img src="/static/images/dummy3.jpg" width="100" height="100" class="selected"></li>
 	<li><img src="/static/images/dummy4.jpg" width="100" height="100" class="selected"></li>
 	<li><img src="/static/images/dummy5.jpg" width="100" height="100" class="selected"></li>
-	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>
+	<li><img src="/static/images/dummy1.jpg" width="100" height="100" class="selected"></li>  
-
+-->  
-    
 </ul>  
 {% endblock %}
 

urbstudio/urb/models.py

@@ -16,6 +16,28 @@ class Project(models.Model):
 #    end_date = models.DateField(blank=True)
 #    location = models.CharField(max_length=255, blank=True)
 
+    def get_info(self):
+        return {
+            'id': self.id,
+            'title': self.title,
+            'slug': self.slug,
+            'thumb_image': self.thumb_image.url,
+            'size_program': self.size_program,
+            'design_statement': self.design_statement,
+            'extra_text': self.extra_text,
+            'images': self.get_images()
+        }
+
+
+    def get_images(self):
+        imgs = []
+        for i in self.projectimage_set.all():
+            imgs.append({
+                'url': i.image.url,
+                'caption': i.caption
+            })
+        return imgs
+
     def __unicode__(self):
         return self.title
 

urbstudio/urb/views.py

@@ -1,5 +1,8 @@
 # Create your views here.
-from django.shortcuts import render_to_response
+from django.shortcuts import render_to_response, get_object_or_404
+from models import *
+import json
+from ox.django.shortcuts import render_to_json_response
 
 def home(request):
     return render_to_response("home.html", {})
@@ -8,7 +11,15 @@ def profile(request):
     return render_to_response("profile.html", {})
 
 def projects(request):
-    return render_to_response("projects.html", {})
+    return render_to_response("projects.html", {
+        'projects': Project.objects.all()
+    })
+
+def project_json(request):
+    project_id = request.GET.get("id", "0")
+    project = get_object_or_404(Project, pk=project_id)
+    data = project.get_info()
+    return render_to_json_response(data)
 
 def jobs(request):
     return render_to_response("jobs.html", {})

urbstudio/urls.py

@@ -12,6 +12,7 @@ urlpatterns = patterns('',
     (r'^home$', 'urb.views.home'),
     (r'^profile$', 'urb.views.profile'),
     (r'^projects$', 'urb.views.projects'),
+    (r'^project_json$', 'urb.views.project_json'),
     (r'^jobs$', 'urb.views.jobs'),
     (r'^contact$', 'urb.views.contact'),
     (r'^links$', 'urb.views.links'),