Need help debugging this JQuery/script please
1.The .innerfade() isn't getting triggered, all the images from data are there just not triggered
2. The controls are missing but that may be an error on 1 preventing
code excerpts
[model code]
class Slides(models.Model):
page = models.ForeignKey(Page)
slide = models.FileField(upload_to='slides', null=True, blank=True)
[/model code]
[url code]
(r'^json/(?P<id>[-\d]+)/$', 'smartpages.views.interrogate'),
[/url code]
[view code]
class JsonResponse(HttpResponse):
def __init__(self, data):
mimetype = 'text/text'
#mimetype='application/json'
HttpResponse.__init__(self,
content=simplejson.dumps(data),
mimetype=mimetype
)
def page(request):
sp = Page.objects.get(slug=slug)
data = sp.slides_set.all()
def interrogate(request, id):
thing = Slides.objects.get(pk=id)
picture = thing.slide
raise NameError(picture)
return JsonResponse({'picture': picture, 'position': thing.id, })
[/view code]
[template code]
<script type="text/javascript" src="/media/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/media/js/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="/media/css/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="/media/css/skins/tango/skin.css" />
<script type="text/javascript" src="/media/js/jquery.innerfade.js"></script>
{% block extrahead %}{% endblock %}
<script type="text/javascript">
$(document).ready(function() {
$('#left').innerfade({
animationtype: 'fade',
speed: '5000',
timeout: '2000',
type: 'sequence',
containerheight: '418px'
});
var nextimage=function() {
image=$(this).attr('href');
$.get(image, function(stuff){
var json = eval('('+stuff+')');
picture = '<img src=\"'+json.picture+'\" id="displayed-image" />
current = json.position;
$('.mainimage').html(picture);
// previous and next links
// get the list of id's
var nextprev = [{% for j in data %}'{{j.id}}'{% if not forloop.last %},{% endif %}{% endfor %}];
// compare list to current to determine position in list
// and knowing that generate the prev and next links based on json id
for (var y in nextprev) {
z = y;
}
for(x=0; x<nextprev.length; x++){
x = parseInt(x);
if(current == nextprev[x]){
result = nextprev[x];
previous = nextprev[x-1];
prev_link = '<a href=\"/move/json/'+previous+'/\"><<< Previous</a>';
next_up = nextprev[x+1];
next_link = '<a href=\"/move/json/'+next_up+'/\"> | Next >>></a>';
// if not 1st image show previous
if(x != 0){
$("span#prev").html(prev_link);
}
// if it is dont show previous
if(x == 0){
prev_link = ' ';
$("span#prev").html(prev_link);
}
// if not last show next
if(x != z){
$("span#next").html(next_link);
}
// if it is last dont show next
if(x == z){
next_link = ' ';
$("span#next").html(next_link);
}
}
}
$("span#prev a").click(nextimage);
$("span#next a").click(nextimage);
start_slide = '<a href=\"#\" id=\"restart\">Restart Slideshow</a>'
$("div#start").html(start_slide);
$("a#restart").click(function() {
location.reload(true);
});
});
return false;
};
$("div#selection").css("overflow", "hidden");
$("div#selection a").click(nextimage);
$(".stop a").click(nextimage);
$("a#restart").click(function() {
location.reload(true);
});
});
</script>
</head>
<body>
<div id="slide_content">
<div id="selection"> //this section is to jump to slides by triggering the json id
<a href="/move/json/1/">Slide 1</a><br />
Slide 2<br />
</div>
<div id="left" class="mainimage">
{% for photo in data %}
<div class="stop"><a href="/move/json/{{photo.id}}/"><img src="{{ photo.slide.url|thumbnail:"maxwidth=839, maxheight=418" }}" alt="{{photo.title}}" /></a>
</div>
{% endfor %}
</div>
<div style="clear:both;"></div>
<div id="picnav"><span id="prev"></span><span id="next"></span></div><br /><div id = "info_text"> </div><div id="start"></div>
</div>
</div>
[END]
I'd really appreciate any help getting this to work thx in advance