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>
<a href='video/video8.html' title="Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell" class="btn">Zur nächsten 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 vorherigen Episode</a>
<a href='/video/video8.html' title="Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell" slug="/episodes/die-heilige-elisabeth-von-thueringen" 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/video8.webm" id="html-player" style="width: 100%;" poster="video/video8.jpg"></video>
<video src="/video/video8.webm" id="html-player" style="width: 100%;" poster="/video/video8.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/video7.html" title="Episode 7: Van Gogh als verkannter Hochstapler | 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" class="btn">Zur nächsten 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 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 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/video9.webm" id="html-player" style="width: 100%;" poster="video/video9.jpg"></video>
<video src="/video/video9.webm" id="html-player" style="width: 100%;" poster="/video/video9.jpg"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
......@@ -40,29 +40,97 @@
<h2>Hans Baldung, gen. Grien - Markgraf Christoph I. von Baden mit seiner Familie in Anbetung vor der heiligen Anna Selbdritt (um 1509/10)</h2>
<p class="subtitle">Mischtechnik auf Nadelholz, 67,5 x 218 cm, <a href="http://www.kunsthalle-karlsruhe.de" target=new>Staatliche Kunsthalle Karlsruhe</a>, Inv. 88</p>
<div style="text-align: justify;">
Hans Baldung, auch Hans Baldung Grien (1484/85–1545), Markgraf Christoph I. mit seiner Familie in Anbetung vor der heiligen Anna selbdritt ,1509/12, Mischtechnik auf Tannenholz, 67 x 218 cm, Staatliche Kunsthalle Karlsruhe, Inv. Nr. 88
<p>
Links der Anna-Selbdritt-Gruppe kniet zuvorderst der Markgraf, erkennbar durch sein Familienwappen,
das an prominenter Stelle auf der Seite der männlichen Familienmitglieder abgebildet ist. Hinter
dem Markgrafen, der seine Hände zum Gebet erhoben hat, drängen sich seine zehn ebenfalls betenden
Söhne, die sich anhand ihrer Attribute identifizieren lassen. Auf der rechten Bildseite ist die
Markgräfin Otilia, ebenfalls mit ihrem Familienwappen präsentiert. Im Gegensatz zu ihrem Gemahl
ist sie am weitesten vom heiligen Geschehen im Bildzentrum entfernt und schließt die Gruppe ihrer
fünf Töchter am rechten Bildrand ab.
</p>
<p>
Bei näherer Betrachtung der markgräflichen Nachkommen fällt die ausgeprägte Ähnlichkeit der
Dargestellten auf, die scheinbar ihrer Verwandtschaft geschuldet ist. Dennoch hat man nicht den
Eindruck, dass Baldung hier mit exakten Naturstudien gearbeitet hat. Besonders die drei Schwestern
in der ersten Reihe auf der rechten Bildseite gleichen sich fast bis ins Detail. Ganz offensichtlich
scheinen Söhne sowie Töchter dieselbe Gesichtsstudie zur Vorlage gehabt zu haben.
</p>
<p>
Nam distinctio voluptates quidem possimus unde quidem alias. Non nam qui molestias eveniet eos optio minus.
Esse magni hic et quae culpa. Autem harum aut sequi expedita a nisi.
Grundsätzlich lässt sich in Baldungs Gemälden deutlich erkennen, dass er seine Fertigkeiten im Bereich
der Federzeichnung, der Holzschnitte und dem Entwerfen von Glasfenstern erlernt hat, was sich in einer
Tendenz zur Flächenbildung niederschlägt, obwohl Baldung stets um eine plastische Gestaltung bemüht
ist. Auch in der Markgrafentafel aus unserer Reihe ist die gestalterische Tiefenwirkung nur rudimentär
gelungen. Dies ist deutlich bei den hintereinander gestaffelten, kleiner werdenden Schwestern rechts
im Bild zu erkennen. Die fast stereotype Wiederholung der Frauen, die Baldung dabei verwendet, scheint
weder ihn noch die Auftraggeber gestört zu haben.
</p>
<p>
Iusto fugit laborum eveniet tempore. Quia molestias neque ratione excepturi facere occaecati quam aut.
Et eum ducimus autem libero voluptas et quia cumque. Architecto sit iste enim voluptatem consequatur non omnis.
Fuga iusto odit id.
In der Kunst tritt das Phänomen der bildimmanenten Wiederholung verschiedentlich auf, wie auch das
Beispiel Überfall auf einen Geleitzug (1618) des flämischen Malers Sebastian Vrancx (1573–1647) zeigt.
Das Kopieren einzelner Details innerhalb des Bildes hat vor allem pragmatische Gründe: Es ermöglicht
ein schnelleres Arbeiten, da diese Bestandteile von Schülern und Gehilfen ausgeführt werden können,
während der Meister die aussagekräftigeren Teilstücke eines Werkes ausführt.
</p>
<p>
Quae qui natus tempore omnis consequatur fugit expedita id. Dignissimos molestiae dolores quasi.
Ducimus facere esse architecto ipsam qui illum autem nihil. Rerum ratione cum quod est corrupti vel.
Ipsum aliquam beatae perspiciatis veniam et modi et voluptatem. Fuga doloremque quia omnis accusamus
incidunt maxime.
Bei Baldungs Markgrafentafel hat die Wiederholung der Gesichter einen weiteren Hintergrund: Zum
Zeitpunkt der Entstehung des Andachtsbildes waren bereits einige der Familienmitglieder verstorben.