front image slider working

This commit is contained in:
Sanj 2011-11-01 02:19:06 +00:00
parent 0644a7dcf5
commit 03d9484857
5 changed files with 51 additions and 8 deletions

View File

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

View File

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

View File

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

View File

@ -106,3 +106,34 @@ ItfSlider.prototype.moveRight = function(distance, speed) {
// this.positionArrow(); // 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);
}

View File

@ -18,13 +18,19 @@
<div id="centerContent" class="centerContent"> <div id="centerContent" class="centerContent">
<div id="image"> <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="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="buttonBanner">
<div id="button0" class="buttons buttonsSelected"></div> <div id="button0" class="buttons"></div>
<div id="button1" class="buttons buttonsSelected"></div> <div id="button1" class="buttons"></div>
<div id="button2" class="buttons buttonsSelected"></div> <div id="button2" class="buttons"></div>
</div> </div>
</div> </div>