Commit 5ee0bec2 authored by Jonas Heinrich's avatar Jonas Heinrich

further implement pretty urls

parent 91622c1e
...@@ -13,84 +13,84 @@ ...@@ -13,84 +13,84 @@
<section class="grid"> <section class="grid">
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/klaassen.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/klaassen.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Dr. Alice Anna Klaassen</h3> <h3 class="meta__title">Dr. Alice Anna Klaassen</h3>
<span class="quiet small">Seminarleitung, Organisation</span> <span class="quiet small">Seminarleitung, Organisation</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/muñoz morcillo.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/muñoz morcillo.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3> <h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3>
<span class="quiet small">Seminarleitung, Regie</span> <span class="quiet small">Seminarleitung, Regie</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/leiber.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/leiber.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Anke Leiber</h3> <h3 class="meta__title">Anke Leiber</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span> <span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/mangler.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/mangler.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Jonas Mangler</h3> <h3 class="meta__title">Jonas Mangler</h3>
<span class="quiet small">Autor, Schnitt, Kamera</span> <span class="quiet small">Autor, Schnitt, Kamera</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/mueller-quade.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/mueller-quade.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Insa Müller-Quade</h3> <h3 class="meta__title">Insa Müller-Quade</h3>
<span class="quiet small">Moderation</span> <span class="quiet small">Moderation</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/sannwald.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/sannwald.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Timo Sannwald</h3> <h3 class="meta__title">Timo Sannwald</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span> <span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/traboulsi-wegner.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/traboulsi-wegner.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Natalija Traboulsi-Wegner</h3> <h3 class="meta__title">Natalija Traboulsi-Wegner</h3>
<span class="quiet small">Autor, Webseite</span> <span class="quiet small">Autor, Webseite</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/stetter.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/stetter.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Hanna Stetter</h3> <h3 class="meta__title">Hanna Stetter</h3>
<span class="quiet small">Moderation</span> <span class="quiet small">Moderation</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/esser.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/esser.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Hanna Eßer</h3> <h3 class="meta__title">Hanna Eßer</h3>
<span class="quiet small">Autor</span> <span class="quiet small">Autor</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/heinrich.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/heinrich.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Jonas Heinrich</h3> <h3 class="meta__title">Jonas Heinrich</h3>
<span class="quiet small">Webseite</span> <span class="quiet small">Webseite</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/levchenko.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/levchenko.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Oleksander Levchenko</h3> <h3 class="meta__title">Oleksander Levchenko</h3>
<span class="quiet small">Dokumentation</span> <span class="quiet small">Dokumentation</span>
</div> </div>
</span> </span>
<span class="grid__item"> <span class="grid__item">
<div class="profile-img clip" style="background-image: url('images/profiles/schmitt.jpeg'); background-size: cover; background-position: 50% 0;"></div> <div class="profile-img clip" style="background-image: url('/images/profiles/schmitt.jpeg'); background-size: cover; background-position: 50% 0;"></div>
<div class="meta center"> <div class="meta center">
<h3 class="meta__title">Lukas Schmitt</h3> <h3 class="meta__title">Lukas Schmitt</h3>
<span class="quiet small">Konzeptplanung</span> <span class="quiet small">Konzeptplanung</span>
...@@ -146,12 +146,12 @@ ...@@ -146,12 +146,12 @@
</p> </p>
<div id='partner_logos'> <div id='partner_logos'>
<a href="https://www.zak.kit.edu" target=new><img src="images/logo_zak.png"></a> <a href="https://www.zak.kit.edu" target=new><img src="/images/logo_zak.png"></a>
<a href="https://www.kit.edu" target=new><img src="images/logo_kit_whitened.png"></a> <a href="https://www.kit.edu" target=new><img src="/images/logo_kit_whitened.png"></a>
<a href="http://www.staedtische-galerie.de" target=new><img src="images/logo_staedtische_galerie.png"></a> <a href="http://www.staedtische-galerie.de" target=new><img src="/images/logo_staedtische_galerie.png"></a>
<a href="http://zkm.de" target=new><img src="images/logo_zkm.png"></a> <a href="http://zkm.de" target=new><img src="/images/logo_zkm.png"></a>
<a href="http://www.kunsthalle-karlsruhe.de" target=new><img src="images/logo_kunsthalle.png"></a> <a href="http://www.kunsthalle-karlsruhe.de" target=new><img src="/images/logo_kunsthalle.png"></a>
<a href="https://www.bildkunst.de" target=new><img src="images/logo_vg_kunst_bild.png"></a> <a href="https://www.bildkunst.de" target=new><img src="/images/logo_vg_kunst_bild.png"></a>
</div> </div>
</div> </div>
......
<!doctype html>
<html lang="de">
<head>
<meta data-react-helmet="true" charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Folge & Varianz | Ausstellung-Virtuell</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/overview.css">
<link rel="stylesheet" type="text/css" href="css/about.css">
<link rel="stylesheet" type="text/css" href="css/mapbox-gl-0.44.1.css">
<link rel="stylesheet" type="text/css" href="css/videre.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
</head>
<body>
<div class="container">
<logo>
<img class='logo' src='images/logo.png'>
<a title="Folge & Varianz | Ausstellung-Virtuell" href='main.html'>
<h2>Ausstellung-Virtuell</h2>
<h1>Folge & Varianz</h1>
</a>
<img class="burger_menu" id="burger_menu" src='images/menu.png'>
</logo>
<navigation>
<div class="wrapper">
<ul>
<li><a href='overview.html' title="Werkübersicht | Ausstellung-Virtuell" class="nav-item">Werkübersicht</a></li>
<li><a href='about.html' title="Über das Projekt | Ausstellung-Virtuell" class="nav-item">Über das Projekt</a></li>
</ul>
</div>
</navigation>
<map>
<!-- <div id='map' style='width: 100%; height: 100%;'></div> -->
</map>
<content>
<div class='episode-wrapper'>
<div class='empty'></div>
<div class="description">
<h2>Werkübersicht</h2>
Unsere Virtuelle-Ausstellung beginnt mit velit magni aliquid minus. Repellendus et harum consectetur alias ad. Suscipit vel assumenda quia similique et quia doloribus. Maiores sed animi voluptate et perferendis eum quia. Et est veniam temporibus quia ipsa repudiandae autem quo. Sed harum assumenda accusantium mollitia.
</div>
<div class='video-navigation'>
<a href='overview.html' title="Werkübersicht | Ausstellung-Virtuell" class='btn'>Zur Werkübersicht</a>
<a href='video/video1.html' title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell" class='btn'>Zur ersten Episode</a>
</div>
</div>
</content>
</div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/videre.js"></script>
<script src="js/jquery-ui-1.12.1.min.js"></script>
<script src='js/mapbox-gl-0.44.1.js'></script>
<script src="js/map.js"></script>
<script src="js/main.js"></script>
</body>
</html>
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
<meta data-react-helmet="true" charset="utf-8"/> <meta data-react-helmet="true" charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>Folge & Varianz | Ausstellung-Virtuell</title> <title>Folge & Varianz | Ausstellung-Virtuell</title>
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="/css/main.css">
<link rel="stylesheet" type="text/css" href="css/overview.css"> <link rel="stylesheet" type="text/css" href="/css/overview.css">
<link rel="stylesheet" type="text/css" href="css/about.css"> <link rel="stylesheet" type="text/css" href="/css/about.css">
<link rel="stylesheet" type="text/css" href="css/mapbox-gl-0.44.1.css"> <link rel="stylesheet" type="text/css" href="/css/mapbox-gl-0.44.1.css">
<link rel="stylesheet" type="text/css" href="css/videre.css"> <link rel="stylesheet" type="text/css" href="/css/videre.css">
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans" rel="stylesheet">
...@@ -19,18 +19,18 @@ ...@@ -19,18 +19,18 @@
<div class="container"> <div class="container">
<logo> <logo>
<img class='logo' src='images/logo.png'> <img class='logo' src='/images/logo.png'>
<a title="Folge & Varianz | Ausstellung-Virtuell" href='main.html'> <a title="Folge & Varianz | Ausstellung-Virtuell" href='/main.html' slug="/">
<h2>Ausstellung-Virtuell</h2> <h2>Ausstellung-Virtuell</h2>
<h1>Folge & Varianz</h1> <h1>Folge & Varianz</h1>
</a> </a>
<img class="burger_menu" id="burger_menu" src='images/menu.png'> <img class="burger_menu" id="burger_menu" src='/images/menu.png'>
</logo> </logo>
<navigation> <navigation>
<div class="wrapper"> <div class="wrapper">
<ul> <ul>
<li><a href='overview.html' title="Werkübersicht | Ausstellung-Virtuell" class="nav-item">Werkübersicht</a></li> <li><a href='/overview.html' title="Werkübersicht | Ausstellung-Virtuell" slug="/overview" class="nav-item">Werkübersicht</a></li>
<li><a href='about.html' title="Über das Projekt | Ausstellung-Virtuell" class="nav-item">Über das Projekt</a></li> <li><a href='/about.html' title="Über das Projekt | Ausstellung-Virtuell" slug="/about" class="nav-item">Über das Projekt</a></li>
</ul> </ul>
</div> </div>
</navigation> </navigation>
...@@ -41,20 +41,89 @@ ...@@ -41,20 +41,89 @@
</content> </content>
</div> </div>
<script src="js/jquery-3.3.1.min.js"></script> <script src="/js/jquery-3.3.1.min.js"></script>
<script src="js/videre.js"></script> <script src="/js/videre.js"></script>
<script src="js/jquery-ui-1.12.1.min.js"></script> <script src="/js/jquery-ui-1.12.1.min.js"></script>
<script src='js/mapbox-gl-0.44.1.js'></script> <script src='/js/mapbox-gl-0.44.1.js'></script>
<script src="js/map.js"></script> <script src="/js/map.js"></script>
<script src="js/main.js"></script> <script src="/js/main.js"></script>
<?php <?php
if(isset($_GET['page'])){
print($_GET['page']); if (isset($_GET['page'])){
$page = $_GET['page'];
} else { } else {
$page = "main";
}
switch($page) {
case "about":
$url = "/about.html";
$title = "Über das Projekt | Ausstellung-Virtuell";
$slug = "/about";
break;
case "main":
$url = "/main.html";
$title = "Folge & Varianz | Ausstellung-Virtuell";
$slug = "/";
break;
case "overview":
$url = "/overview.html";
$title = "Werkübersicht | Ausstellung-Virtuell";
$slug = "/overview";
break;
case "episodes/ehrung-des-quadrats":
$url = "/video/video1.html";
$title = "Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell";
$slug = "/episodes/ehrung-des-quadrats";
break;
case "episodes/dynamische-struktur":
$url = "/video/video2.html";
$title = "Episode 2: Dynamische Struktur | Ausstellung-Virtuell";
$slug = "/episodes/dynamische-struktur";
break;
case "episodes/ueberfall-auf-einen-geleitzug":
$url = "/video/video3.html";
$title = "Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell";
$slug = "/episodes/ueberfall-auf-einen-geleitzug";
break;
case "episodes/abendessen-in-der-schuene-und-co":
$url = "/video/video4.html";
$title = "Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell";
$slug = "/episodes/abendessen-in-der-schuene-und-co";
break;
case "episodes/take-a-long-break-1-2":
$url = "/video/video5.html";
$title = "Episode 5: Take a long break I, II | Ausstellung-Virtuell";
$slug = "/episodes/take-a-long-break-1-2";
break;
case "episodes/grosses-stillleben-mit-kerzen-und-spiegel":
$url = "/video/video6.html";
$title = "Episode 6: Großes Stillleben mit Kerzen und Spiegel | Ausstellung-Virtuell";
$slug = "/episodes/grosses-stillleben-mit-kerzen-und-spiegel";
break;
case "episodes/van-gogh-als-verkannter-hochstapler":
$url = "/video/video7.html";
$title = "Episode 7: Van Gogh als verkannter Hochstapler | Ausstellung-Virtuell";
$slug = "/episodes/ehrung-des-quadrats";
break;
case "episodes/die-heilige-elisabeth-von-thueringen":
$url = "/video/video8.html";
$title = "Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell";
$slug = "/episodes/die-heilige-elisabeth-von-thueringen";
break;
case "episodes/markgraf-christoph-1-von-baden-mit-seiner-familie":
$url = "/video/video9.html";
$title = "Episode 9: Markgraf Christoph I. von Baden mit seiner Familie | Ausstellung-Virtuell";
$slug = "/episodes/markgraf-christoph-1-von-baden-mit-seiner-familie";
break;
case "episodes/bubbles":
$url = "/video/video10.html";
$title = "Episode 10: Bubbles | Ausstellung-Virtuell";
$slug = "/episodes/bubbles";
break;
}
echo "<script language='javascript'>"; echo "<script language='javascript'>";
echo " load_page('main.html', 'Folge & Varianz | Ausstellung-Virtuell');"; echo " load_page('$url', '$title', '$slug');";
echo "</script>"; echo "</script>";
}
?> ?>
</body> </body>
......
...@@ -13,27 +13,29 @@ $('body').on('click','.btn, .nav-item, logo, .video-item', function(e) { ...@@ -13,27 +13,29 @@ $('body').on('click','.btn, .nav-item, logo, .video-item', function(e) {
if ($(this).prop('tagName') == "A") { if ($(this).prop('tagName') == "A") {
var $this = $(this), var $this = $(this),
title = $this.attr("title"), title = $this.attr("title"),
url = $this.attr("href"); url = $this.attr("href"),
slug = $this.attr("slug");
} else { } else {
var $this = $(this).find('a'), var $this = $(this).find('a'),
title = $this.attr("title"), title = $this.attr("title"),
url = $this.attr("href"); url = $this.attr("href"),
slug = $this.attr("slug");
} }
load_page(url, title); load_page(url, title, slug);
return false; return false;
}); });
function load_page(url, title) { function load_page(url, title, slug) {
$("content").empty(); $("content").empty();
$("content").hide().load(url).fadeIn('fast'); $("content").hide().load(url).fadeIn('fast');
document.title = title; document.title = title;
window.history.pushState({url: "" + url + "", title: "" + title + ""}, title, url); window.history.pushState({url: "" + url + "", title: "" + title + "", slug: "" + slug + ""}, title, slug);
} }
window.onpopstate = function(e) { window.onpopstate = function(e) {
load_page(e.state ? e.state.url : null, e.state ? e.state.title : null); load_page(e.state ? e.state.url : null, e.state ? e.state.title : null, e.state ? e.state.slug : null);
}; };
...@@ -9,8 +9,8 @@ ...@@ -9,8 +9,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='overview.html' title="Werkübersicht | Ausstellung-Virtuell" class='btn'>Zur Werkübersicht</a> <a href='/overview.html' title="Werkübersicht | Ausstellung-Virtuell" slug="/overview" class='btn'>Zur Werkübersicht</a>
<a href='video/video1.html' title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell" class='btn'>Zur ersten Episode</a> <a href='/video/video1.html' title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell" slug="/episodes/ehrung-des-quadrats" class='btn'>Zur ersten Episode</a>
</div> </div>
</div> </div>
......
...@@ -11,77 +11,77 @@ ...@@ -11,77 +11,77 @@
<section class="video-grid"> <section class="video-grid">
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video1.jpg');"></div> <div class="video-img" style="background-image: url('/video/video1.jpg');"></div>
<a href='video/video1.html' title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell"> <a href='/video/video1.html' title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell" slug="/episodes/ehrung-des-quadrats">
<span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span> <span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span>
<span class="video-description">Die ineinander geschachtelten, farbigen Quadrate in dem Werk von Josef Albers erinnern an das Spiel mit Matrjoschka-Puppen.</span> <span class="video-description">Die ineinander geschachtelten, farbigen Quadrate in dem Werk von Josef Albers erinnern an das Spiel mit Matrjoschka-Puppen.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video2.jpg');"></div> <div class="video-img" style="background-image: url('/video/video2.jpg');"></div>
<a href='video/video2.html' title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell"> <a href='/video/video2.html' title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell" slug="/episodes/dynamische-struktur">
<span class="video-title">Dynamische Struktur</span> <span class="video-title">Dynamische Struktur</span>
<span class="video-description">Heinz Mack entwickelt eine variierende und folgenreiche Bildstruktur. Sie ist Ausdruck einer künstlerischen Neuausrichtung in der Nachkriegszeit.</span> <span class="video-description">Heinz Mack entwickelt eine variierende und folgenreiche Bildstruktur. Sie ist Ausdruck einer künstlerischen Neuausrichtung in der Nachkriegszeit.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video3.jpg');"></div> <div class="video-img" style="background-image: url('/video/video3.jpg');"></div>
<a href='video/video3.html' title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell"> <a href='/video/video3.html' title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell" slug="/episodes/ueberfall-auf-einen-geleitzug">
<span class="video-title">Überfall auf einen Geleitzug</span> <span class="video-title">Überfall auf einen Geleitzug</span>
<span class="video-description">Etliche Detailszenen sind in den Schlachtenbildern von Sebastian Vrancx zu erkennen. Dabei fällt eine wiederkehrende, einheitliche Typologie der Figuren auf.</span> <span class="video-description">Etliche Detailszenen sind in den Schlachtenbildern von Sebastian Vrancx zu erkennen. Dabei fällt eine wiederkehrende, einheitliche Typologie der Figuren auf.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video4.jpg');"></div> <div class="video-img" style="background-image: url('/video/video4.jpg');"></div>
<a href='video/video4.html' title="Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell"> <a href='/video/video4.html' title="Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell" slug="/episodes/abendessen-in-der-schuene-und-co">
<span class="video-title">Abendessen in der Scheune & co.</span> <span class="video-title">Abendessen in der Scheune & co.</span>
<span class="video-description">Der flämische Maler David Teniers der Jüngere inszeniert ausgelassene Dorffeste und Alltagsszenen. In seinen Werken finden sich zudem zahlreiche Stillleben.</span> <span class="video-description">Der flämische Maler David Teniers der Jüngere inszeniert ausgelassene Dorffeste und Alltagsszenen. In seinen Werken finden sich zudem zahlreiche Stillleben.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video5.jpg');"></div> <div class="video-img" style="background-image: url('/video/video5.jpg');"></div>
<a href='video/video5.html' title="Episode 5: Take a long break I, II | Ausstellung-Virtuell"> <a href='/video/video5.html' title="Episode 5: Take a long break I, II | Ausstellung-Virtuell" slug="/episodes/take-a-long-break-1-2">
<span class="video-title">Take a long break I, II</span> <span class="video-title">Take a long break I, II</span>
<span class="video-description">Großformatige Fotografien, die eine Tasse zeigen, bewegen sich scheinbar magisch im Raum. Die Installation von Marijke van Warmerdam erzeugt Varianz innerhalb der Bewegung.</span> <span class="video-description">Großformatige Fotografien, die eine Tasse zeigen, bewegen sich scheinbar magisch im Raum. Die Installation von Marijke van Warmerdam erzeugt Varianz innerhalb der Bewegung.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video6.jpg');"></div> <div class="video-img" style="background-image: url('/video/video6.jpg');"></div>
<a href='video/video6.html' title="Episode 6: Großes Stillleben mit Kerzen und Spiegel | Ausstellung-Virtuell"> <a href='/video/video6.html' title="Episode 6: Großes Stillleben mit Kerzen und Spiegel | Ausstellung-Virtuell" slug="/episodes/grosses-stillleben-mit-kerzen-und-spiegel">
<span class="video-title">Großes Stillleben mit Kerzen und Spiegel</span> <span class="video-title">Großes Stillleben mit Kerzen und Spiegel</span>
<span class="video-description">Der breite Spiegel hinter dem Stillleben im Ölgemälde von Max Beckmann reflektiert die Gegenstände auf ungewöhnliche Weise. Sie entwickeln scheinbar ein Eigenleben.</span> <span class="video-description">Der breite Spiegel hinter dem Stillleben im Ölgemälde von Max Beckmann reflektiert die Gegenstände auf ungewöhnliche Weise. Sie entwickeln scheinbar ein Eigenleben.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video7.jpg');"></div> <div class="video-img" style="background-image: url('/video/video7.jpg');"></div>
<a href='video/video7.html' title="Episode 7: Van Gogh als verkannter Hochstapler | Ausstellung-Virtuell"> <a href='/video/video7.html' title="Episode 7: Van Gogh als verkannter Hochstapler | Ausstellung-Virtuell" slug="/episodes/van-gogh-als-verkannter-hochstapler">
<span class="video-title">Van Gogh als verkannter Hochstapler</span> <span class="video-title">Van Gogh als verkannter Hochstapler</span>
<span class="video-description">Der Künstler Arnulf Rainer übermalt Fotografien von van Goghs Gemälden. Was zuerst zerstörerisch anmutet, eröffnet auf den zweiten Blick neue thematische Aspekte.</span> <span class="video-description">Der Künstler Arnulf Rainer übermalt Fotografien von van Goghs Gemälden. Was zuerst zerstörerisch anmutet, eröffnet auf den zweiten Blick neue thematische Aspekte.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video8.jpg');"></div> <div class="video-img" style="background-image: url('/video/video8.jpg');"></div>
<a href='video/video8.html' title="Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell"> <a href='/video/video8.html' title="Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell" slug="/episodes/die-heilige-elisabeth-von-thueringen">
<span class="video-title">Die heilige Elisabeth von Thüringen</span> <span class="video-title">Die heilige Elisabeth von Thüringen</span>
<span class="video-description">Täuschend echt stellt Grünewald zwei Heilige als Steinfiguren auf den Tafeln des Heller-Altars dar. Ein einheitlicher Bildaufbau erweckt den Eindruck einer Zusammengehörigkeit.</span> <span class="video-description">Täuschend echt stellt Grünewald zwei Heilige als Steinfiguren auf den Tafeln des Heller-Altars dar. Ein einheitlicher Bildaufbau erweckt den Eindruck einer Zusammengehörigkeit.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video9.jpg');"></div> <div class="video-img" style="background-image: url('/video/video9.jpg');"></div>
<a href='video/video9.html' title="Episode 9: Markgraf Christoph I. von Baden mit seiner Familie | Ausstellung-Virtuell"> <a href='/video/video9.html' title="Episode 9: Markgraf Christoph I. von Baden mit seiner Familie | Ausstellung-Virtuell" slug="/episodes/markgraf-christoph-1-von-baden-mit-seiner-familie">
<span class="video-title">Markgraf Christoph I. von Baden mit seiner Familie</span> <span class="video-title">Markgraf Christoph I. von Baden mit seiner Familie</span>
<span class="video-description">Hans Baldung Grien portraitiert in dem Werk die 16-köpfige Familie des Markgraf von Baden. Im Gegensatz zum heutigen Gruppenporträt wirken die dargestellten Personen fast identisch.</span> <span class="video-description">Hans Baldung Grien portraitiert in dem Werk die 16-köpfige Familie des Markgraf von Baden. Im Gegensatz zum heutigen Gruppenporträt wirken die dargestellten Personen fast identisch.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video10.jpg');"></div> <div class="video-img" style="background-image: url('/video/video10.jpg');"></div>
<a href='video/video10.html' title="Episode 10: Bubbles | Ausstellung-Virtuell"> <a href='/video/video10.html' title="Episode 10: Bubbles | Ausstellung-Virtuell" slug="/episodes/bubbles">
<span class="video-title">Bubbles</span> <span class="video-title">Bubbles</span>
<span class="video-description">Die digital projizierten Seifenblasen reagieren auf die Interaktion des Besuchers. In der Installation von Wolfgang Muench und Kiyoshi Furukawa treffen digitale und reale Welt aufeinander. </span> <span class="video-description">Die digital projizierten Seifenblasen reagieren auf die Interaktion des Besuchers. In der Installation von Wolfgang Muench und Kiyoshi Furukawa treffen digitale und reale Welt aufeinander. </span>
</a> </a>
</div> </div>
</section> </section>
<script src="js/main.js"></script> <script src="/js/main.js"></script>
</body> </body>
</html> </html>
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="video/video1.webm" id="html-player" style="width: 100%;" poster="video/video1.jpg"></video> <video src="/video/video1.webm" id="html-player" style="width: 100%;" poster="/video/video1.jpg"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href="overview.html" title="Werkübersicht | Ausstellung-Virtuell" class="btn">Zur Werkübersicht</a> <a href="/overview.html" title="Werkübersicht | Ausstellung-Virtuell" slug="/overview" class="btn">Zur Werkübersicht</a>
<a href='video/video2.html' title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell" class="btn">Zur nächsten Episode</a> <a href='/video/video2.html' title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell" slug="/episodes/dynamische-struktur" class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="video/video10.webm" id="html-player" style="width: 100%;" poster="video/video10.jpg"></video> <video src="/video/video10.webm" id="html-player" style="width: 100%;" poster="/video/video10.jpg"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href="video/video9.html" title="Episode 9: Markgraf Christoph I. von Baden mit seiner Familie | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a> <a href="/video/video9.html" title="Episode 9: Markgraf Christoph I. von Baden mit seiner Familie | Ausstellung-Virtuell" slug="/episodes/markgraf-christoph-1-von-baden-mit-seiner-familie" class="btn">Zur vorherigen Episode</a>
<a href='overview.html' title="Werkübersicht | Ausstellung-Virtuell" class="btn">Zur Werkübersicht</a> <a href='/overview.html' title="Werkübersicht | Ausstellung-Virtuell" slug="/overview" class="btn">Zur Werkübersicht</a>
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="video/video2.webm" id="html-player" style="width: 100%;"poster="video/video2.jpg"></video> <video src="/video/video2.webm" id="html-player" style="width: 100%;"poster="/video/video2.jpg"></video>
</div> </div>
<div class="vid-toggle-layer"></div> <div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div> <div class="vid-shadow-layer"></div>
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href="video/video1.html" title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a> <a href="/video/video1.html" title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell" slug="/episodes/ehrung-des-quadrats" class="btn">Zur vorherigen Episode</a>
<a href='video/video3.html' title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell" class="btn">Zur nächsten Episode</a> <a href='/video/video3.html' title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell" slug="/episodes/ueberfall-auf-einen-geleitzug" class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -6,7 +6,7 @@ ...@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;"> <div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5"> <div class="vid-html5">
<video src="video/video3.webm" id="html-player" style="width: 100%;" poster="video/video3.jpg"></video> <video src="/video/video3.webm" id="html-player" style="width: 100%;" poster="/video/video3.jpg"></video>
</div> </div>
<div class="vid-toggle-layer"></div>