Commit 1cba741d authored by Maarten van der Veen's avatar Maarten van der Veen

add pictures to detail page

parent b861f686
...@@ -100,7 +100,11 @@ ...@@ -100,7 +100,11 @@
$(function() { $(function() {
var loc = window.location.pathname; // returns the full URL var loc = window.location.pathname; // returns the full URL
if("" === loc || "/" === loc) { if("" === loc || "/" === loc) {
// add landingpage class to header
$('header').addClass('landingpage'); $('header').addClass('landingpage');
// remove page class from main
$('main').removeClass();
} }
}); });
</script> </script>
......
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<h1 id="shelter-name">[UNKNOWN NAME]</h1> <h1 id="shelter-name">[UNKNOWN NAME]</h1>
</div> </div>
</section> </section>
<section class="shelterimg" onclick="modalOpen()" style="background-image: url('{{ url_for('static', filename = 'img/shelter.jpg') }}')"> <section id="coverpicture" class="shelterimg" onclick="modalOpen()" style="background-image: url('{{ url_for('static', filename = 'img/shelter.jpg') }}')">
<div class="dots"> <div class="dots">
<div class="dot selected"></div> <div class="dot selected"></div>
<div class="dot"></div> <div class="dot"></div>
...@@ -81,31 +81,14 @@ ...@@ -81,31 +81,14 @@
</div> </div>
</section> </section>
<section class="shelterimg" onclick="modalOpen()" style="background-image: url('{{ url_for('static', filename = 'img/shelter.jpg') }}')">
<div class="dots">
<div class="dot selected"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</section>
{% endblock %} {% endblock %}
{% block footer %} {% block footer %}
<div class="mymodal"> <div class="mymodal">
<div class="mymodal-close" onclick="modalClose()"></div> <div class="mymodal-close" onclick="modalClose()"></div>
<div class="swipe"> <div class="swipe">
<div class="panes"> <div id="modalIdentificationPanes" class="panes"></div>
<div class="pane" style="background-image: url('{{ url_for('static', filename = 'img/shelter.jpg') }}"></div> <div id="modalIdentificationDots" class="dots"></div>
<div class="pane" style="background-image: url('{{ url_for('static', filename = 'img/1.jpg') }}"></div>
<div class="pane" style="background-image: url('{{ url_for('static', filename = 'img/2.jpg') }}"></div>
<div class="pane" style="background-image: url('{{ url_for('static', filename = 'img/3.jpg') }}')"></div>
</div>
<div class="dots">
<div class="dot" onclick="show(0, 0, true)"></div>
<div class="dot" onclick="show(1, 0, true)"></div>
<div class="dot" onclick="show(2, 0, true)"></div>
<div class="dot" onclick="show(2, 0, true)"></div>
</div>
</div> </div>
</div> </div>
...@@ -170,9 +153,61 @@ ...@@ -170,9 +153,61 @@
// Initiate leaflet map // Initiate leaflet map
var map = L.map('location-map').setView([lat, lon], 13); var map = L.map('location-map').setView([lat, lon], 13);
// Add OSM base layer
L.tileLayer('http://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png').addTo(map);
// disable dragging and scrolling for mobile view
map.scrollWheelZoom.disable();
map.dragging.disable();
// add location of shelter to map
L.marker([lat, lon]).addTo(map); L.marker([lat, lon]).addTo(map);
// add pictures
addCoverPicture('#coverpicture', data[shelter_id]['Identification']);
addSwipePictures('#modalIdentification', data[shelter_id]['Identification']);
} }
}); });
function addCoverPicture(elementId, section){
if(typeof section['Cover'] !== 'undefined' && section['Cover'].length > 0) {
$(elementId).css("background-image", "url('" + section['Cover'][0] + "')");
}
}
function addSwipePictures(elementId, section){
if(typeof section['Pictures'] !== 'undefined') {
//merge arrays
var d = section['Cover'].concat(section['Pictures']);
// add panes
d3.select(elementId + "Panes")
.selectAll("div")
.data(d)
.enter()
.append("div")
.attr("class","pane")
.attr("style",function (d){ return "background-image: url('" + d + "')";});
// add dots
// TODO increment show id
var dot = 0;
d3.select(elementId + "Dots")
.selectAll("div")
.data(d)
.enter()
.append("div")
.attr("class","dot")
.attr("onclick",function (d){
var r = "_swipe.show(" + dot + ",0,true)";
dot++;
return r;
});
}
}
function tabulate(table_id, d, columns) { function tabulate(table_id, d, columns) {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment