DAAP_interface/templates/browsethearchive.html

{% extends "layout.html" %}
{% block content %}

<div id="browsethearchive-all">
<div class="pagetitle" id="browsethearchive-title">BROWSE THE ARCHIVE</div>

<div id="browsethearchive-grid">

{% for x in results['results']['bindings']%}
<div class="browsethearchive-items">
	<div class="browsethearchive-items-top">	
	{% if "image" in x %}
		<a href='/artwork?id={{ x["work"]["value"] | replace("https://daap.bannerrepeater.org/entity/", "") }}'>
			<img class="browsethearchive-imgs" src='{{ x["image"]["value"] | replace("wiki/File:","wiki/Special:Redirect/file/") }}'>
		</a> <br>
	{% else %}
		<a href='/artwork?id={{ x["work"]["value"] | replace("https://daap.bannerrepeater.org/entity/", "") }}'>
			<img class="browsethearchive-imgs" src="{{ url_for('static', filename='/imgs/Icons/placeholder_no-image2.png') }}"><br>
		</a>
	{% endif %} 
	</div>

	<div class="browsethearchive-items-bottom">
		<a class="title"  href='/artwork?id={{ x["work"]["value"] | replace("https://daap.bannerrepeater.org/entity/", "") }}'>
			{{ x["workLabel"]["value"]}}
		</a> <br>
		<span class="date">
		{% if "date" in x %}
			{{ x["date"]["value"] | replace("T00:00:00Z", "") }}  
		{% endif %}
		</span>

		
	</div>

</div>
{% endfor %}

</div>

<div id="browsethearchive-pagination">
<ul id="browsethearchive-pagin">    
</ul>
</div>

<script type="text/javascript">
	//Pagination
	pageSize = 24;

	var pageCount =  $(".browsethearchive-items").length / pageSize;
    
     for(var i = 0 ; i<pageCount;i++){
        
       $("#browsethearchive-pagin").append('<li><a href="#">'+(i+1)+'</a></li> ');
     }
        $("#browsethearchive-pagin li").first().addClass("current")
    showPage = function(page) {
	    $(".browsethearchive-items").hide();
	    $(".browsethearchive-items").each(function(n) {
	        if (n >= pageSize * (page - 1) && n < pageSize * page)
	            $(this).show();
	    });        
	}
    
	showPage(1);

	$("#browsethearchive-pagin li").click(function() {
	    $("#browsethearchive-pagin li").removeClass("current");
	    $(this).addClass("current");
	    showPage(parseInt($(this).text())) 
	});

</script>

</div>


{% endblock content %}