front image slider working

itf/frontpage/models.py

@@ -9,6 +9,9 @@ class FrontImage(models.Model):
     def __unicode__(self):
         return self.image.url
 
+    class Meta:
+        ordering = ['order']
+
 class SliderBox(models.Model):
     title = models.CharField(max_length=64)
     image = models.ImageField(upload_to='upload/sliderImages/')

itf/frontpage/views.py

@@ -27,9 +27,11 @@ def index(request):
     except:
       statuses = []
     boxes = SliderBox.objects.all()
+    front_images = FrontImage.objects.filter(is_active=True)[0:3]
     return render_to_response("noel/index.html", RequestContext(request, {
         'tweets': [urlize(s.text) for s in statuses],
-        'boxes': boxes
+        'boxes': boxes,
+        'front_images': front_images
     }))
 
 def contact(request):

itf/static/css/noel/home.css

@@ -13,8 +13,9 @@ margin-left:auto;}
 {position:relative;
 float:left;}
 
-#banner
-{-moz-border-radius:8px;
+.banner
+{display:none;
+-moz-border-radius:8px;
 -webkit-border-radius:8px;
 border-radius:8px;
 margin-top:16px;

itf/static/js/frontpage.js

@@ -106,3 +106,34 @@ ItfSlider.prototype.moveRight = function(distance, speed) {
 //        this.positionArrow();
     }
 };
+
+
+/* for front images */
+var frontImageInterval;
+$(function() {
+    $('.banner').eq(0).show();
+    $('#button0').addClass("buttonsSelected");
+    setTimeout(cycleFrontImage, 5000);
+//    frontImageInterval = setInterval(cycleFrontImage, 1000); 
+
+});
+
+function cycleFrontImage() {
+    BOO = $('.buttonsSelected');
+    var currImage = parseInt($('.buttonsSelected').attr("id").replace("button", ""));
+    var currBanner = $('.banner').eq(currImage);
+    if (currImage < ($('.buttons').length - 1)) {
+        var nextImage = currImage + 1;
+    } else {
+        var nextImage = 0;
+    }
+    console.log(nextImage);
+    $('.banner').hide();
+    $('.buttonsSelected').removeClass("buttonsSelected");
+    $('.banner').eq(nextImage).show();
+    $('#button' + nextImage).addClass("buttonsSelected");
+    setTimeout(cycleFrontImage, 5000);
+}
+    
+
+

itf/templates/noel/index.html

@@ -18,13 +18,19 @@
   <div id="centerContent" class="centerContent">
     
     <div id="image">
-   	  <img src="/static/images/noel/banner2.jpg" width="468" height="282"alt="banner-image" id="banner" >
+        {% load thumbnail %}
+        {% for f in front_images %}
+            {% thumbnail f.image "468x282" crop="center" as im %}
+            <img src="{{ im.url }}" width="468" height="282" alt="" title="{{ f.caption }}" class="banner">
+            {% endthumbnail %}
+        {% endfor %}
+<!--   	  <img src="/static/images/noel/banner2.jpg" width="468" height="282" alt="banner-image" id="banner" > -->
       <!--<p id="textTop">Welcome to the India Theatre Forum </p>-->
-      <p id="textBottom"> A place where you can come and get, give, share, exchange all sorts of information, ideas, resources and more. </p>
+<!--      <p id="textBottom"> A place where you can come and get, give, share, exchange all sorts of information, ideas, resources and more. </p> -->
       <div id="buttonBanner">
-        <div id="button0" class="buttons buttonsSelected"></div>
-        <div id="button1" class="buttons buttonsSelected"></div>
-        <div id="button2" class="buttons buttonsSelected"></div>
+        <div id="button0" class="buttons"></div>
+        <div id="button1" class="buttons"></div>
+        <div id="button2" class="buttons"></div>
       </div>
     </div>