2013-07-18 91 views
0

我想將Jquery腳本合併到我的Django應用程序中。該腳本是一個幻燈片 - 當我點擊一個圖像時,它淡出,一個新的淡入。我有兩個問題 - 我不知道如何從我的jQuery腳本中調用相關圖像。其次,我的HTML標頭標籤可能有錯誤,它沒有選擇正確的文件或庫。我在Django和Jquery都很新,所以你的幫助是值得讚賞的。將Jquery與Django集成

這是我的HTML頭......

<head> 
<title>Listings</title> 
{% load staticfiles %} 

<link rel="stylesheet" type="text/css" href="{% static 'noticeboard/main.css' %}"/> 

<script type="text/javascript" href="http://code.jquery.com/jquery-1.8.0.min.js"></script> 
<link rel="javascript" type="text/javascript" href="{% static 'noticeboard/main.js' %}"/> 
</head> 

下面是相關的div ...

<div id = "image-gallery"> 
    {% if listing.image1 %} 
    <img id = "picture" src ="{{ listing.image1.url }}"> 
    {% endif %} 
</div> 

這裏是我的jQuery腳本。我猜var ImageName是不正確的。我需要在這裏調用相關的圖像文件,只是不知道如何。

$(document).ready(function() { 
    var imageName = ["imgres.jpeg", "imgres2.jpeg", "imgres3.jpeg"]; 
    var indexNum = 0; 

    $("#picture").click(function() { 

     $("#picture").fadeOut(30, function() { 
      $("#picture").attr("src", imageName[indexNum]); 
      indexNum++; 
      if (indexNum > 2) {indexNum = 0;} 
      $("#picture").fadeIn(50); 
     }); 
    }); 
}); 
+0

的static_url添加到'變種imageName = [ 「imgres.jpeg」, 「imgres2.jpeg」, 「imgres3.jpeg」];'所以它看起來像'變種imageName = [「我的 - static-url/imgres.jpeg「,」my-static-url/imgres2.jpeg「,」my-static-url/imgres3.jpeg「];' – nickromano

回答

0
var imageName = [{% for image_obj in image_objs %}"{{image_obj.image_field.url}}"{% if not forloop.last %},{% endif %} {% endfor %}]; 
+0

感謝Sandeep,但並不是Jquery腳本必須成爲HTML代碼爲了讓我使用上面的Django模板?他們目前在單獨的文件中。 –

+0

爲了讓jquery工作,你必須在你的html文件中包含