Skip to content

GitLab

Commit 91622c1e authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files

beginning to implement clean url

parent ff0121db
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 43 deletions
index.html
View file @ 91622c1e
......@@ -4,7 +4,7 @@
<head>
<meta data-react-helmet="true" charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ausstellung-Virtuell | Folge und Varianz</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/overview.css">
<link rel="stylesheet" type="text/css" href="css/about.css">
......@@ -20,7 +20,7 @@
<div class="container">
<logo>
<img class='logo' src='images/logo.png'>
<a href='main.html'>
<a title="Folge & Varianz | Ausstellung-Virtuell" href='main.html'>
<h2>Ausstellung-Virtuell</h2>
<h1>Folge & Varianz</h1>
</a>
......@@ -29,8 +29,8 @@
<navigation>
<div class="wrapper">
<ul>
<li><a href='overview.html' class="nav-item">Werkübersicht</a></li>
<li><a href='about.html' class="nav-item">Über das Projekt</a></li>
<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>
......@@ -49,8 +49,8 @@
</div>
<div class='video-navigation'>
<a href='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='video/video1.html' class='btn'>Zur ersten Episode</a>
<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>
......
index.php 0 → 100644
View file @ 91622c1e
<!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>
</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>
<?php
if(isset($_GET['page'])){
print($_GET['page']);
} else {
echo "<script language='javascript'>";
echo " load_page('main.html', 'Folge & Varianz | Ausstellung-Virtuell');";
echo "</script>";
}
?>
</body>
</html>
js/main.js
View file @ 91622c1e
......@@ -12,25 +12,28 @@ $('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");
} else {
var $this = $(this).find('a'),
title = $this.attr("title"),
url = $this.attr("href");
}
load_page(url);
load_page(url, title);
return false;
});
function load_page(url) {
function load_page(url, title) {
$("content").empty();
$("content").hide().load(url).fadeIn('fast');
window.history.pushState('', '', url);
document.title = title;
window.history.pushState({url: "" + url + "", title: "" + title + ""}, title, url);
}
window.onpopstate = function(event) {
load_page(location.pathname);
window.onpopstate = function(e) {
load_page(e.state ? e.state.url : null, e.state ? e.state.title : null);
};
main.html
View file @ 91622c1e
......@@ -9,8 +9,8 @@
</div>
<div class="video-navigation">
<a href='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='video/video1.html' class='btn'>Zur ersten Episode</a>
<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>
......
overview.html
View file @ 91622c1e
......@@ -12,70 +12,70 @@
<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'>
<a href='video/video1.html' title="Episode 1: Ehrung des Quadrats - Gelbes Zentrum | Ausstellung-Virtuell">
<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'>
<a href='video/video2.html' title="Episode 2: Dynamische Struktur | Ausstellung-Virtuell">
<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'>
<a href='video/video3.html' title="Episode 3: Überfall auf einen Geleitzug | Ausstellung-Virtuell">
<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'>
<a href='video/video4.html' title="Episode 4: Abendessen in der Scheune & co. | Ausstellung-Virtuell">
<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'>
<a href='video/video5.html' title="Episode 5: Take a long break I, II | Ausstellung-Virtuell">
<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'>
<a href='video/video6.html' title="Episode 6: Großes Stillleben mit Kerzen und Spiegel | Ausstellung-Virtuell">
<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'>
<a href='video/video7.html' title="Episode 7: Van Gogh als verkannter Hochstapler | Ausstellung-Virtuell">
<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'>
<a href='video/video8.html' title="Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell">
<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'>
<a href='video/video9.html' title="Episode 9: Markgraf Christoph I. von Baden mit seiner Familie | Ausstellung-Virtuell">
<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'>
<a href='video/video10.html' title="Episode 10: Bubbles | Ausstellung-Virtuell">
<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>
......
video/video1.html
View file @ 91622c1e
......@@ -69,8 +69,8 @@
</div>
<div class="video-navigation">
<a href="overview.html" class="btn">Zur Werkübersicht</a>
<a href='video/video2.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video10.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video9.html" class="btn">Zur vorherigen Episode</a>
<a href='overview.html' class="btn">Zur Werkübersicht</a>
<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>
</div>
</div>
......
video/video2.html
View file @ 91622c1e
......@@ -69,8 +69,8 @@
</div>
<div class="video-navigation">
<a href="video/video1.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video3.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video3.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video2.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video4.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video4.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video3.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video5.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video5.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video4.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video6.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video6.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video5.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video7.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video7.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video6.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video8.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video8.html
View file @ 91622c1e
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href="video/video7.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video9.html' class="btn">Zur nächsten Episode</a>
<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>
</div>
</div>
......
video/video9.html
View file @ 91622c1e
......@@ -76,8 +76,8 @@
</div>
<div class="video-navigation">
<a href="video/video8.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video10.html' class="btn">Zur nächsten Episode</a>
<a href="video/video8.html" title="Episode 8: Die heilige Elisabeth von Thüringen | Ausstellung-Virtuell" class="btn">Zur vorherigen Episode</a>
<a href='video/video10.html' title="Episode 10: Bubbles | Ausstellung-Virtuell" class="btn">Zur nächsten Episode</a>
</div>
</div>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment