slider for projects

urbstudio/templates/projects.html

@@ -10,7 +10,7 @@
 <script type="text/javascript" src="/static/js/jquery.simplyscroll-1.0.4.js"></script>
 
 <script type="text/javascript">
-		$(function(){
+        function activateSlides() {
 			$('#slidesDiv').slides({
 				preload: true,
 				preloadImage: 'img/loading.gif',
@@ -18,6 +18,16 @@
 				pause: 4000,
 				hoverPause: true
 			});
+        }
+
+        function getSliderElem(img) {
+//            console.log(img);
+            var $a = $('<a />').attr("href", "#");
+            var $img = $('<img />').attr("src", img.url).appendTo($a);
+            return $a;
+        }
+
+		$(function(){
 
             $('.projectThumb').click(function() {
 //                alert("hi");
@@ -33,6 +43,17 @@
                     $('#projectSizeProgram').next().html(nl2br(data.size_program));
                     $('#projectDesignStatement').next().html(nl2br(data.design_statement));
                     $('#projectExtraText').next().html(nl2br(data.extra_text));
+                    $('#slidesDiv').remove();
+                    var $container = $('#slidesDivContainer');
+                    var $div = $('<div />').attr("id", "slidesDiv").appendTo($container);
+                    var $innerContainer = $('<div />').addClass("slidesInner").appendTo($div);
+
+                    for (var i=0; i<data.images.length; i++) {
+                        var img = data.images[i];
+                        var $img = getSliderElem(img);
+                        $img.appendTo($innerContainer);
+                    }
+                    activateSlides();
                 }); 
             });
 
@@ -63,7 +84,7 @@
 {% block content %}
     <div id="galleryContainer">
     <div id="slidesContainer">
-		
+		<div id="slidesDivContainer">
         <div id="slidesDiv">
             <div class="slidesInner">
                 <a href=""><img src="/static/images/dummyimage.jpg" width="600" height="450"></a>                
@@ -74,7 +95,7 @@
 
        	      	
             </div>
-			
+	    </div>
             <a href="#" class="prev"><img src="/static/images/arrowprevious.png" width="30" height="30" alt="Arrow Prev"></a>
 			<a href="#" class="next"><img src="/static/images/arrownext.png" width="30" height="30" alt="Arrow Next"></a>
 			

urbstudio/urb/models.py

@@ -1,5 +1,6 @@
 from django.db import models
 from os.path import join
+from sorl.thumbnail import get_thumbnail
 
 def project_thumb_path(instance, filename):
     return join('project_thumbs', instance.slug, filename)
@@ -32,8 +33,9 @@ class Project(models.Model):
     def get_images(self):
         imgs = []
         for i in self.projectimage_set.all():
+            image_url = get_thumbnail(i.image, "x450", crop="center").url 
             imgs.append({
-                'url': i.image.url,
+                'url': image_url,
                 'caption': i.caption
             })
         return imgs

urbstudio/urb/views.py

@@ -4,6 +4,7 @@ from models import *
 import json
 from ox.django.shortcuts import render_to_json_response
 
+
 def home(request):
     return render_to_response("home.html", {})