2017-04-15 1 views
0

Exam 모델에 연결된 외래 키인 ExamFile 모델의 업로드 된 이미지를 표시하는 모달이 있습니다. 라이트 박스 galerry 위해서는 내가 각 examfile 사진의 슬라이드 번호를 지정해야 할 일을, 그래서 내가 (아마도 템플릿?) 를 내가이 스크립트가 모든 그림 1을 추가해야합니다 : 난 전체 게시 한Django가 템플릿에 +1을 추가합니다.

{% for file in exam.examfile_set.all %} 


<div class="row"> 
    <div class="column"> 
    <img src="{{file.exam_file.url}}" width=60 height="60" 
onclick="openModal();currentSlide(//this is where i need to append +1 for every file in exam.examfile_set.all //)" 
class="hover-shadow cursor"> 
    </div> 
{% endfor %} 

<div id="myModal" class="modal"> 
    <span class="close cursor" onclick="closeModal()">&times;</span> 
    <div class="modal-content"> 
    {% for file in exam.examfile_set.all %} 
    <div class="mySlides"> 
     <div class="numbertext">1/4</div> 
     <img src="{{file.exam_file.url}}" style="width:100%"> 
    </div> 



    <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
    <a class="next" onclick="plusSlides(1)">&#10095;</a> 

    <div class="caption-container"> 
     <p id="caption"></p> 
    </div> 
</div> 
</div> 
</div> 
<script> 
function openModal() { 
    document.getElementById('myModal').style.display = "block"; 
} 

function closeModal() { 
    document.getElementById('myModal').style.display = "none"; 
} 

var slideIndex = 1; 
showSlides(slideIndex); 

function plusSlides(n) { 
    showSlides(slideIndex += n); 
} 

function currentSlide(n) { 
    showSlides(slideIndex = n); 
} 

function showSlides(n) { 
    var i; 
    var slides = document.getElementsByClassName("mySlides"); 
    var dots = document.getElementsByClassName("demo"); 
    var captionText = document.getElementById("caption"); 
    if (n > slides.length) {slideIndex = 1} 
    if (n < 1) {slideIndex = slides.length} 
    for (i = 0; i < slides.length; i++) { 
     slides[i].style.display = "none"; 
    } 
    for (i = 0; i < dots.length; i++) { 
     dots[i].className = dots[i].className.replace(" active", ""); 
    } 
    slides[slideIndex-1].style.display = "block"; 
    dots[slideIndex-1].className += " active"; 
    captionText.innerHTML = dots[slideIndex-1].alt; 
} 
</script> 



{% endfor %} 

을 코드하지만 내 문제는 5 번째 notempty 행에 있습니다. 미리 감사드립니다!

답변

0

님의 내장에서 사용할 수있는 forloop.counter 변수 : 워드 프로세서에서

{% for file in exam.examfile_set.all %} 
    <div class="row"> 
     <div class="column"> 
     <img src="{{ file.exam_file.url }}" width=60 height="60" 
    onclick="openModal();currentSlide({{ forloop.counter }})" 
    class="hover-shadow cursor"> 
     </div> 
{% endfor %} 

더 많은 정보 : https://docs.djangoproject.com/en/dev/ref/templates/builtins/#for.

+0

Ive는 이미 이것을 시도했지만 어떤 이유로 doestn이 작동하는 것처럼 보입니다. ( – lagtri

+0

오, 알겠습니다 .foor loop 카운터는 어떤 이유로 1 번만 생성합니다. 실제로 1을 추가하는 다른 방법이 있습니까? – lagtri

+0

정말 이상합니다. . 이렇게하면 :'{% for file.examfile_set.all %} {{forloop.counter}} {% endfor %}'당신은'1 1 1 ...'만 볼 수 있습니까? 예를 들어 뷰에서 간단한리스트를 전달하여 템플릿을 디버깅하십시오 :'def my_view (request) : return { 'data': range (5)}'. – illagrenan