147 lines
4.4 KiB
HTML
147 lines
4.4 KiB
HTML
{% extends "layout.html" %}
|
|
{% block body %}
|
|
<script type="text/javascript">
|
|
//Change active button in navbar
|
|
|
|
$("document").ready( function(){
|
|
$("li").removeClass("active");
|
|
$("#home").addClass("active");
|
|
|
|
pages = [];
|
|
i=1;
|
|
$(".image").each( function() {
|
|
pages.push($(this).attr("rel"))
|
|
});
|
|
|
|
|
|
$(".image").click(function() {
|
|
var image = $(this).attr("rel");
|
|
$('#display').hide();
|
|
$('#display').fadeIn('slow');
|
|
$('#display').attr("src", image);
|
|
i = $(this).data("number");
|
|
console.log(i);
|
|
next_page = pages[i];
|
|
console.log("next: " + next_page)
|
|
if(i >= 2)
|
|
{
|
|
previous_page = pages[i - 2];
|
|
console.log("previous: " + previous_page)
|
|
}
|
|
return false;
|
|
});
|
|
|
|
previous_page = "";
|
|
console.log(pages);
|
|
next_page = pages[1];
|
|
$(function() {
|
|
$("#newer").click(function() {
|
|
if(i < pages.length)
|
|
{
|
|
previous_page = pages[i-1];
|
|
$('#display').hide();
|
|
$('#display').fadeIn('slow');
|
|
$('#display').attr("src", next_page);
|
|
|
|
i++;
|
|
next_page = pages[i];
|
|
}
|
|
return false;
|
|
});
|
|
$("#older").click(function() {
|
|
if(i >= 2)
|
|
{
|
|
$('#display').hide();
|
|
$('#display').fadeIn('slow');
|
|
$('#display').attr("src", previous_page);
|
|
|
|
previous_page = pages[i-3];
|
|
next_page = pages[i-1]
|
|
i--;
|
|
}
|
|
return false;
|
|
});
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
<div class="row-fluid ">
|
|
<div class="span2 well-small">
|
|
<h4>Click on page below to display it...</h4>
|
|
{% for thumb in thumbs %}
|
|
<a href="#" rel="{{ url_for('static', filename=thumb.href) }}" class="image"
|
|
data-number="{{loop.index}}">
|
|
<img class="img img-polaroid" src="{{ url_for('static', filename= thumb.src) }}" alt="">
|
|
</a>
|
|
<br />
|
|
<br />
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<div class="span8 well-large">
|
|
|
|
<h2>{{thumbs_info.subject}}, {{thumbs_info.datestring}}</h2>
|
|
|
|
<a href="#" id="image">
|
|
<img id="display" class="img img-rounded" src="{{ url_for('static', filename=main_page_src) }}" alt="">
|
|
</a>
|
|
<ul class="pager">
|
|
<li class="previous">
|
|
<a href="" id="older">← Previous page</a>
|
|
</li>
|
|
<li class="next">
|
|
<a href="" id="newer">Next page→</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<div class="span2">
|
|
<ul class="nav nav-pills">
|
|
<h4>Other dates...</h4>
|
|
<ul class="nav nav-pills">
|
|
{%- for key, year in thumbs_info.other_dates.items() recursive %}
|
|
{%- if year %}
|
|
<li> <a href="#">{{key}}</a>
|
|
<ul class="nav nav-pills">
|
|
|
|
{% for month, days in year.items() %}
|
|
<li><a href="#" class=" disabled"> ->{{month}}</a>
|
|
<ul class="nav nav-pills">
|
|
{% for day in days %}
|
|
{%- if day.source == thumbs_info.datestring%}
|
|
<li>
|
|
<a class="alert-danger small" href="/view/{{thumbs_info.subject}}/{{day.source}}">
|
|
--> {{day.weekday}}, {{day.day}}
|
|
</a>
|
|
</li>
|
|
{%- else %}
|
|
<li><a href="/view/{{thumbs_info.subject}}/{{day.source}}" class="small"> --> {{day.weekday}}, {{day.day}}</a></li>
|
|
{%-endif%}
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</li>
|
|
{%-endif%}
|
|
{%- endfor %}
|
|
</ul>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
<script type="text/javascript">
|
|
$(function() {
|
|
$(".image").click(function() {
|
|
var image = $(this).attr("rel");
|
|
$('#display').hide();
|
|
$('#display').fadeIn('slow');
|
|
$('#display').attr("src", image);
|
|
return false;
|
|
});
|
|
});
|
|
</script> |