Commit 204addb7 authored by Jonas Heinrich's avatar Jonas Heinrich

begin working on pushstate, fix all 'a' href

parent 8a356e9a
......@@ -19,8 +19,8 @@
<div class="container">
<logo>
<img class='logo' src='images/logo.png' ref='main.html'>
<a href=# ref='main.html'>
<img class='logo' src='images/logo.png'>
<a href='main.html'>
<h2>Ausstellung-Virtuell</h2>
<h1>Folge & Varianz</h1>
</a>
......@@ -29,8 +29,8 @@
<navigation>
<div class="wrapper">
<ul>
<li><a href='#' ref='overview.html' class="nav-item">Werkübersicht</a></li>
<li><a href='#' ref='about.html' class="nav-item">Über das Projekt</a></li>
<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>
</ul>
</div>
</navigation>
......@@ -49,8 +49,8 @@
</div>
<div class='video-navigation'>
<a href='#' ref='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a>
<a href='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='video/video1.html' class='btn'>Zur ersten Episode</a>
</div>
</div>
......
......@@ -6,12 +6,35 @@ $( ".burger_menu" ).click(function() {
}
});
$('body').on('click','.btn, .nav-item, .logo', function() {
var link = $(this).attr('ref');
load_page(link);
$('body').on('click','.btn, .nav-item, logo, .video-item', function(e) {
e.preventDefault();
if ($(this).prop('tagName') == "A") {
var $this = $(this),
url = $this.attr("href");
} else {
var $this = $(this).find('a'),
url = $this.attr("href");
}
alert(url);
load_page(url);
return false;
});
function load_page(link) {
function load_page(url) {
$("content").empty();
$("content").hide().load(link).fadeIn('fast');
$("content").hide().load(url).fadeIn('fast');
//window.history.pushState({href: url}, '', url);
}
window.addEventListener('popstate', function(e){
if(e.state)
load_page(e.state.href);
});
......@@ -9,8 +9,8 @@
</div>
<div class="video-navigation">
<a href='#' ref='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a>
<a href='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='video/video1.html' class='btn'>Zur ersten Episode</a>
</div>
</div>
......
......@@ -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='#' src='video/video1.html'>
<a href='video/video1.html'>
<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='#' src='video/video2.html'>
<a href='video/video2.html'>
<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='#' src='video/video3.html'>
<a href='video/video3.html'>
<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='#' src='video/video4.html'>
<a href='video/video4.html'>
<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='#' src='video/video5.html'>
<a href='video/video5.html'>
<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='#' src='video/video6.html'>
<a href='video/video6.html'>
<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='#' src='video/video7.html'>
<a href='video/video7.html'>
<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='#' src='video/video8.html'>
<a href='video/video8.html'>
<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='#' src='video/video9.html'>
<a href='video/video9.html'>
<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='#' src='video/video10.html'>
<a href='video/video10.html'>
<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>
......@@ -83,11 +83,5 @@
</section>
<script src="js/main.js"></script>
<script language="javascript">
$( ".video-item" ).click(function() {
var link = $(this).find('a:first').attr('src');
load_page(link);
});
</script>
</body>
</html>
......@@ -69,8 +69,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="overview.html" class="btn">Zur Werkübersicht</a>
<a href="#" ref='video/video2.html' class="btn">Zur nächsten Episode</a>
<a href="overview.html" class="btn">Zur Werkübersicht</a>
<a href='video/video2.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video9.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='overview.html' class="btn">Zur Werkübersicht</a>
<a href="video/video9.html" class="btn">Zur vorherigen Episode</a>
<a href='overview.html' class="btn">Zur Werkübersicht</a>
</div>
</div>
......
......@@ -69,8 +69,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video1.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video3.html' class="btn">Zur nächsten Episode</a>
<a href="video/video1.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video3.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video2.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video4.html' class="btn">Zur nächsten Episode</a>
<a href="video/video2.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video4.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video3.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video5.html' class="btn">Zur nächsten Episode</a>
<a href="video/video3.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video5.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video4.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video6.html' class="btn">Zur nächsten Episode</a>
<a href="video/video4.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video6.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video5.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video7.html' class="btn">Zur nächsten Episode</a>
<a href="video/video5.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video7.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -38,7 +38,7 @@
<div class="description">
<h2>Arnulf Rainer - Van Gogh als verkannter Hochstapler (1977), Van Gogh im schwarzen Schein (1977-79)</h2>
<p class="subtitle">Schwarzer Stift, Öl und Ölkreise auf Fotografie; Ölkreide auf Fotografie, 58,7 x 47,6 cm; 60,7 x 48,1 cm, <a href="http://www.staedtische-galerie.de" target=new>Städtische Galerie Karlsruhe</a>, Inv. SG 209, SG 207</p>
<p class="subtitle">Schwarzer Stift, Öl und Ölkreise auf Fotografie; Ölkreide auf Fotografie, 58,7 x 47,6 cm; 60,7 x 48,1 cm, Sammlung Garnatz, <a href="http://www.staedtische-galerie.de" target=new>Städtische Galerie Karlsruhe</a>, Inv. SG 209, SG 207</p>
<div style="text-align: justify;">
<p>
Nam distinctio voluptates quidem possimus unde quidem alias. Non nam qui molestias eveniet eos optio minus.
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video6.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video8.html' class="btn">Zur nächsten Episode</a>
<a href="video/video6.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video8.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -68,8 +68,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video7.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video9.html' class="btn">Zur nächsten Episode</a>
<a href="video/video7.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video9.html' class="btn">Zur nächsten Episode</a>
</div>
</div>
......
......@@ -76,8 +76,8 @@
</div>
<div class="video-navigation">
<a href='#' ref="video/video8.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='video/video10.html' class="btn">Zur nächsten Episode</a>
<a href="video/video8.html" class="btn">Zur vorherigen Episode</a>
<a href='video/video10.html' 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