geändert: api.py

	neue Datei:             static/stylesheet.css
	neue Datei:             templates/index.html

api.py

-from flask import Flask, request, jsonify, make_response, g
+from flask import Flask, request, jsonify, make_response, g, render_template
 from flask_cors import CORS
 import BaseXClient
 import threading
@@ -11,15 +11,14 @@ session = BaseXClient.Session('localhost', 1984, 'admin', 'admin')
 def main():
     #globvar = session.query("db:open(\"Holzschnitt\")")
     session.execute("open Holzschnitt")
-    globvar = session.query("declare namespace lido=\"http://www.lido-schema.org\"; for $actor in distinct-values(//lido:actor/lido:nameActorSet/lido:appellationValue/text()) return $actor").execute()
+    globvar = session.query("declare namespace lido=\"http://www.lido-schema.org\"; for $x in (/root/object[position() lt 5]) return $x").context()
 
     
     #globvar = "ws"
     #session.query("db:open(\"Holzschnitt\")").execute()
 
 
-    return globvar
-
+    return render_template('index.html', objects = globvar)
 
 
 

static/stylesheet.css

+h1{
+	text-align: center;
+	font-family: Verdana, Arial, Helvetica, sans-serif;
+
+}
+
+h3{
+	text-align: center;
+}
+
+body {
+  font-size: small;
+  font-family: Verdana, Arial, Helvetica, sans-serif;
+  background-color: #e2e0d9;
+  margin: 0; 
+}
+
+.suchfeld {
+	float: right;
+	padding: 10px 90px;
+	background-color: #333; 
+}
+
+#navibereich {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background-color: #333;
+}
+
+li {
+    float: left;
+}
+
+li a {
+    display: block;
+    color: white;
+    text-align: center;
+    padding: 14px 30px;
+    text-decoration: none;
+}
+
+li a:hover {
+    background-color: #008CBA;
+}
+
+.btn{
+	background-color: #008CBA; 
+    color: white; 
+    border: 3px solid #008CBA;
+}
+
+.btn:hover {
+	background-color: #008CBA;
+    color: white;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
+
+#gallery{
+	padding: 60px;
+}
+
+
+/*Bildergalerie*/
+
+* {
+  box-sizing: border-box;
+}
+
+.row > .column {
+  padding: 0 8px;
+}
+
+.row:after {
+  content: "";
+  display: table;
+  clear: both;
+}
+
+.column {
+  float: left;
+  width: 25%;
+}
+
+/* The Modal (background) */
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  padding-top: 100px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: black;
+}
+
+/* Modal Content */
+.modal-content {
+  position: relative;
+  background-color: #fefefe;
+  margin: auto;
+  padding: 0;
+  width: 90%;
+  max-width: 1200px;
+}
+
+/* The Close Button */
+.close {
+  color: white;
+  position: absolute;
+  top: 10px;
+  right: 25px;
+  font-size: 35px;
+  font-weight: bold;
+}
+
+.close:hover,
+.close:focus {
+  color: #999;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.mySlides {
+  display: none;
+}
+
+.cursor {
+  cursor: pointer
+}
+
+/* Next & previous buttons */
+.prev,
+.next {
+  cursor: pointer;
+  position: absolute;
+  top: 50%;
+  width: auto;
+  padding: 16px;
+  margin-top: -50px;
+  color: white;
+  font-weight: bold;
+  font-size: 20px;
+  transition: 0.6s ease;
+  border-radius: 0 3px 3px 0;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+/* Position the "next button" to the right */
+.next {
+  right: 0;
+  border-radius: 3px 0 0 3px;
+}
+
+/* On hover, add a black background color with a little bit see-through */
+.prev:hover,
+.next:hover {
+  background-color: rgba(0, 0, 0, 0.8);
+}
+
+/* Number text (1/3 etc) */
+.numbertext {
+  color: #f2f2f2;
+  font-size: 12px;
+  padding: 8px 12px;
+  position: absolute;
+  top: 0;
+}
+
+img {
+  margin-bottom: -4px;
+}
+
+.caption-container {
+  text-align: center;
+  background-color: black;
+  padding: 2px 16px;
+  color: white;
+}
+
+.demo {
+  opacity: 0.6;
+}
+
+.active,
+.demo:hover {
+  opacity: 1;
+}
+
+img.hover-shadow {
+  transition: 0.3s
+}
+
+.hover-shadow:hover {
+  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
+}
+
+/*Bildbeschreibung*/
+figcaption {
+	position: absolute;
+	bottom: -3em;
+	text-align: center;
+	line-height: 3em;
+	white-space: nowrap;
+	color: #e2e0d9;
+	background: rgba(0, 0, 0, 0);
+}
+
+
+figure:focus figcaption,
+figure:hover figcaption {
+	bottom: 0;
+	left: 0;
+	width: 100%;
+	background: rgba(0, 0, 0, 0.5);
+  -webkit-transition: 1s;
+
+}
+
+
+@media only screen and (max-width: 800px) {
+	body {
+		width: 100%;
+		margin: 2% 0;
+		padding: 1%;
+	}
+	figure.einzel {
+		width: 48%;
+	}
+}
+
+@media only screen and (max-width: 600px) {
+	figure.einzel {
+		width: 100%;
+	}
+}

templates/index.html

+<!DOCTYPE html>
+<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='stylesheet.css') }}">
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>AMK</title>
+	<h1>AMK</h1>
+	<h3>Atemberaubende Museums-Holzschnitt Kollektion</h3>
+</head>
+<body id="Startseite">
+	<div class="suchfeld">
+		<form>
+			<a href="#"><input type="search" name="Holzschnitte"></a>
+			<datalist id="Holzschnitte">
+				<option value="Autor">
+			</datalist>
+			<button class="btn">suchen</button>
+		</form>
+	</div>
+	<div class="menue">
+		<ul id="navibereich">
+			<li><a href="https://www.wikidata.org/wiki/Wikidata:Main_Page">WikiData</a></li>
+			<li><a href="">Filter</a></li>
+		</ul>
+	</div>
+  <ul>
+    {% for object in objects %}
+      <li>{{ loop.index }} <br>
+        Künstler: {{ object }} <br>
+       <img src=" {{ object.bildLink }}"  class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;"> </li>
+    {% endfor %}
+  </ul>
+	<div id="gallery">
+		<div class="row">
+<!--    {% for object in objects %}
+      <div class="column">
+        <figure class="Bild{{ loop.index }}">
+          <img src="{{ object.bildLink }}" onclick="openModal();currentSlide({{ loop.index }})" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;">
+          <figcaption>Informationen zum Bild  {{ object.bildLink }}</figcaption>
+        </figure> 
+      </div>
+    {% endfor %}
+ 		<div class="column">
+  		<figure class="Bild1">
+   			<img src="./Bilder/IE1898.224-1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow" style="width: 350px; height: 260px; padding: 10px;">
+   			<figcaption>Informationen zum Bild</figcaption>
+   		</figure> 
+ 		</div>
+  		<div class="column">
+  		<figure class="Bild2">
+  		  <img src="./Bilder/S2009.259.a-1.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow" style="width: 330px; height: 260px; padding: 10px;">
+			<figcaption>Informationen zum Bild</figcaption>
+		</figure>
+  		</div>
+
+  		<div class="column">
+  		<figure class="Bild3">
+    		<img src="../xmlProject/Bilder/S2009.197-1.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow"  style="width: 350px; height: 260px; padding: 10px;">
+   			<figcaption>Informationen zum Bild</figcaption>
+   		</figure>	
+  		</div>
+
+  		<div class="column">
+  		<figure class="Bild4">
+    		<img src="../xmlProject/Bilder/S2009.259.b-1.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow"  style="width: 350px; height: 260px; padding: 10px;">
+    		<figcaption>Informationen zum Bild</figcaption>
+    	</figure> 
+
+  		</div> -->
+	</div>
+
+		<div id="myModal" class="modal">
+  			<span class="close cursor" onclick="closeModal()">&times;</span>
+  		<div class="modal-content">
+
+    	<div class="mySlides">
+      		<div class="numbertext">1 / 4</div>
+        		<img src="../xmlProject/Bilder/IE1898.224-1.jpg" style="width:100%">
+    	</div>
+
+   		<div class="mySlides">
+     	    <div class="numbertext">2 / 4</div>
+       			<img src="../xmlProject/Bilder/S2009.259.a-1.jpg" style="width:100%">
+   		</div>
+
+    	<div class="mySlides">
+      		<div class="numbertext">3 / 4</div>
+       	 		<img src="../xmlProject/Bilder/S2009.197-1.jpg" style="width:100%">
+    	</div>
+
+    	<div class="mySlides">
+      		<div class="numbertext">4 / 4</div>
+        		<img src="../xmlProject/Bilder/S2009.259.b-1.jpg" 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 class="slide">
+    	<div class="column">
+     		<img class="demo" src="../xmlProject/Bilder/IE1898.224-1.jpg" onclick="currentSlide(1)" alt="1/4"  style="width: 300px; height: 210px; padding: 20px;">
+    	</div>
+
+ 	    <div class="column">
+      		<img class="demo" src="../xmlProject/Bilder/S2009.259.a-1.jpg" onclick="currentSlide(2)" alt="2/4"  style="width: 300px; height: 210px; padding: 20px;">
+    	</div>
+
+    	<div class="column">
+     		<img class="demo" src="../xmlProject/Bilder/S2009.197-1.jpg" onclick="currentSlide(3)" alt="3/4"  style="width: 300px; height: 210px; padding: 20px;">
+   		</div>
+
+   		<div class="column">
+      		<img class="demo" src="../xmlProject/Bilder/S2009.259.b-1.jpg" onclick="currentSlide(4)" alt="4/4"  style="width: 300px; height: 210px; padding: 20px;">
+    	</div>
+    	</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>	
+</html>
\ No newline at end of file