From 03d94848574ca007ad52ed08519b8677895e2c85 Mon Sep 17 00:00:00 2001
From: Sanj <b@pad.ma>
Date: Tue, 1 Nov 2011 02:19:06 +0000
Subject: [PATCH] front image slider working

---
 itf/frontpage/models.py       |  3 +++
 itf/frontpage/views.py        |  4 +++-
 itf/static/css/noel/home.css  |  5 +++--
 itf/static/js/frontpage.js    | 31 +++++++++++++++++++++++++++++++
 itf/templates/noel/index.html | 16 +++++++++++-----
 5 files changed, 51 insertions(+), 8 deletions(-)

diff --git a/itf/frontpage/models.py b/itf/frontpage/models.py
index 8941116..74957f7 100755
--- a/itf/frontpage/models.py
+++ b/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/')
diff --git a/itf/frontpage/views.py b/itf/frontpage/views.py
index 8a83a44..8d9a81e 100755
--- a/itf/frontpage/views.py
+++ b/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):
diff --git a/itf/static/css/noel/home.css b/itf/static/css/noel/home.css
index 5f7515e..5e05f43 100755
--- a/itf/static/css/noel/home.css
+++ b/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;
diff --git a/itf/static/js/frontpage.js b/itf/static/js/frontpage.js
index 60d7310..7d4b513 100755
--- a/itf/static/js/frontpage.js
+++ b/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);
+}
+    
+
+
diff --git a/itf/templates/noel/index.html b/itf/templates/noel/index.html
index 7965fb5..54bf711 100755
--- a/itf/templates/noel/index.html
+++ b/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>