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

further implement pretty urls

parent 91622c1e
......@@ -13,84 +13,84 @@
<section class="grid">
<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">
<h3 class="meta__title">Dr. Alice Anna Klaassen</h3>
<span class="quiet small">Seminarleitung, Organisation</span>
</div>
</span>
<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">
<h3 class="meta__title">Dr. Jesús Muñoz Morcillo</h3>
<span class="quiet small">Seminarleitung, Regie</span>
</div>
</span>
<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">
<h3 class="meta__title">Anke Leiber</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div>
</span>
<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">
<h3 class="meta__title">Jonas Mangler</h3>
<span class="quiet small">Autor, Schnitt, Kamera</span>
</div>
</span>
<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">
<h3 class="meta__title">Insa Müller-Quade</h3>
<span class="quiet small">Moderation</span>
</div>
</span>
<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">
<h3 class="meta__title">Timo Sannwald</h3>
<span class="quiet small">Kamera, Video-Schnitt, Storyboard</span>
</div>
</span>
<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">
<h3 class="meta__title">Natalija Traboulsi-Wegner</h3>
<span class="quiet small">Autor, Webseite</span>
</div>
</span>
<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">
<h3 class="meta__title">Hanna Stetter</h3>
<span class="quiet small">Moderation</span>
</div>
</span>
<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">
<h3 class="meta__title">Hanna Eßer</h3>
<span class="quiet small">Autor</span>
</div>
</span>
<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">
<h3 class="meta__title">Jonas Heinrich</h3>
<span class="quiet small">Webseite</span>
</div>
</span>
<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">
<h3 class="meta__title">Oleksander Levchenko</h3>
<span class="quiet small">Dokumentation</span>
</div>
</span>
<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">
<h3 class="meta__title">Lukas Schmitt</h3>
<span class="quiet small">Konzeptplanung</span>
......@@ -146,12 +146,12 @@
</p>
<div id='partner_logos'>
<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="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://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.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="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://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>
</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 @@
<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" 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">
......@@ -19,18 +19,18 @@
<div class="container">
<logo>
<img class='logo' src='images/logo.png'>
<a title="Folge & Varianz | Ausstellung-Virtuell" href='main.html'>
<img class='logo' src='/images/logo.png'>
<a title="Folge & Varianz | Ausstellung-Virtuell" href='/main.html' slug="/">
<h2>Ausstellung-Virtuell</h2>
<h1>Folge & Varianz</h1>
</a>
<img class="burger_menu" id="burger_menu" src='images/menu.png'>
<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>
<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" slug="/about" class="nav-item">Über das Projekt</a></li>
</ul>
</div>
</navigation>
......@@ -41,20 +41,89 @@
</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>
<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>
<?php
if(isset($_GET['page'])){
print($_GET['page']);
} else {
if (isset($_GET['page'])){
$page = $_GET['page'];
} 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 " load_page('main.html', 'Folge & Varianz | Ausstellung-Virtuell');";
echo " load_page('$url', '$title', '$slug');";
echo "</script>";
}
?>
</body>
......
......@@ -13,27 +13,29 @@ $('body').on('click','.btn, .nav-item, logo, .video-item', function(e) {
if ($(this).prop('tagName') == "A") {
var $this = $(this),
title = $this.attr("title"),
url = $this.attr("href");
url = $this.attr("href"),
slug = $this.attr("slug");
} else {
var $this = $(this).find('a'),
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;
});
function load_page(url, title) {
function load_page(url, title, slug) {
$("content").empty();
$("content").hide().load(url).fadeIn('fast');
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) {
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 @@
</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>
<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" slug="/episodes/ehrung-des-quadrats" class='btn'>Zur ersten Episode</a>
</div>
</div>
......
......@@ -11,77 +11,77 @@
<section class="video-grid">
<div class="video-item">
<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">
<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" slug="/episodes/ehrung-des-quadrats">
<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>
</a>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video2.jpg');"></div>
<a href='video/video2.html' title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell">
<div class="video-img" style="background-image: url('/video/video2.jpg');"></div>
<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-description">Heinz Mack entwickelt eine variierende und folgenreiche Bildstruktur. Sie ist Ausdruck einer künstlerischen Neuausrichtung in der Nachkriegszeit.</span>
</a>
</div>
<div class="video-item">
<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">
<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" slug="/episodes/ueberfall-auf-einen-geleitzug">
<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>
</a>
</div>
<div class="video-item">
<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">
<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" slug="/episodes/abendessen-in-der-schuene-und-co">
<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>
</a>
</div>
<div class="video-item">
<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">
<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" slug="/episodes/take-a-long-break-1-2">
<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>
</a>
</div>
<div class="video-item">
<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">
<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" slug="/episodes/grosses-stillleben-mit-kerzen-und-spiegel">
<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>
</a>
</div>
<div class="video-item">
<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">
<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" slug="/episodes/van-gogh-als-verkannter-hochstapler">
<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>
</a>
</div>
<div class="video-item">
<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">
<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" slug="/episodes/die-heilige-elisabeth-von-thueringen">
<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>
</a>
</div>
<div class="video-item">
<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">
<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" 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-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>
</div>
<div class="video-item">
<div class="video-img" style="background-image: url('video/video10.jpg');"></div>
<a href='video/video10.html' title="Episode 10: Bubbles | Ausstellung-Virtuell">
<div class="video-img" style="background-image: url('/video/video10.jpg');"></div>
<a href='/video/video10.html' title="Episode 10: Bubbles | Ausstellung-Virtuell" slug="/episodes/bubbles">
<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>
</a>
</div>
</section>
<script src="js/main.js"></script>
<script src="/js/main.js"></script>
</body>
</html>
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<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 class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -69,8 +69,8 @@
</div>
<div class="video-navigation">
<a href="overview.html" title="Werkübersicht | Ausstellung-Virtuell" 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="/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" slug="/episodes/dynamische-struktur" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<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 class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -68,8 +68,8 @@
</div>
<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='overview.html' title="Werkübersicht | Ausstellung-Virtuell" class="btn">Zur Werkübersicht</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" slug="/overview" class="btn">Zur Werkübersicht</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<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 class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -69,8 +69,8 @@
</div>
<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/video3.html' title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell" class="btn">Zur nächsten 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" slug="/episodes/ueberfall-auf-einen-geleitzug" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<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 class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video2.html" title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a>
<a href="video/video4.html" title="Episode 4: Abendessen in der Scheune & co. | 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 vorherigen Episode</a>
<a href="/video/video4.html" title="Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell" slug="/episodes/abendessen-in-der-scheune-und-co" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video4.webm" id="html-player" style="width: 100%;" poster="video/video4.jpg"></video>
<video src="/video/video4.webm" id="html-player" style="width: 100%;" poster="/video/video4.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video3.html" title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a>
<a href='video/video5.html' title="Episode 5: Take a long break I, II | 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 vorherigen Episode</a>
<a href='/video/video5.html' title="Episode 5: Take a long break I, II | Ausstellung-Virtuell" slug="/episodes/take-a-long-break-1-2" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video5.webm" id="html-player" style="width: 100%;" poster="video/video5.jpg"></video>
<video src="/video/video5.webm" id="html-player" style="width: 100%;" poster="/video/video5.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video4.html" title="Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a>
<a href='video/video6.html' title="Episode 6: Großes Stillleben mit Kerzen und Spiegel | Ausstellung-Virtuell" class="btn">Zur nächsten Episode</a>
<a href="/video/video4.html" title="Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell" slug="/episodes/abendessen-in-der-scheune-und-co" class="btn">Zur vorherigen Episode</a>
<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" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video6.webm" id="html-player" style="width: 100%;" poster="video/video6.jpg"></video>
<video src="/video/video6.webm" id="html-player" style="width: 100%;" poster="/video/video6.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video5.html" title="Episode 5: Take a long break I, II | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a>
<a href='video/video7.html' title="Episode 7: Van Gogh als verkannter Hochstapler | Ausstellung-Virtuell" class="btn">Zur nächsten Episode</a>
<a href="/video/video5.html" title="Episode 5: Take a long break I, II | Ausstellung-Virtuell" slug="/episodes/take-a-long-break-1-2" class="btn">Zur vorherigen Episode</a>
<a href='/video/video7.html' title="Episode 7: Van Gogh als verkannter Hochstapler | Ausstellung-Virtuell" slug="/episodes/van-gogh-als-verkannter-hochstapler" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -6,7 +6,7 @@
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/video7.webm" id="html-player" style="width: 100%;" poster="video/video7.jpg"></video>
<video src="/video/video7.webm" id="html-player" style="width: 100%;" poster="/video/video7.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video6.html" title="Episode 6: Großes Stillleben mit Kerzen und Spiegel | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a>