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

begin working on pushstate, fix all 'a' href

parent 8a356e9a
...@@ -19,8 +19,8 @@ ...@@ -19,8 +19,8 @@
<div class="container"> <div class="container">
<logo> <logo>
<img class='logo' src='images/logo.png' ref='main.html'> <img class='logo' src='images/logo.png'>
<a href=# ref='main.html'> <a href='main.html'>
<h2>Ausstellung-Virtuell</h2> <h2>Ausstellung-Virtuell</h2>
<h1>Folge & Varianz</h1> <h1>Folge & Varianz</h1>
</a> </a>
...@@ -29,8 +29,8 @@ ...@@ -29,8 +29,8 @@
<navigation> <navigation>
<div class="wrapper"> <div class="wrapper">
<ul> <ul>
<li><a href='#' ref='overview.html' class="nav-item">Werkübersicht</a></li> <li><a href='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='about.html' class="nav-item">Über das Projekt</a></li>
</ul> </ul>
</div> </div>
</navigation> </navigation>
...@@ -49,8 +49,8 @@ ...@@ -49,8 +49,8 @@
</div> </div>
<div class='video-navigation'> <div class='video-navigation'>
<a href='#' ref='overview.html' class='btn'>Zur Werkübersicht</a> <a href='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a> <a href='video/video1.html' class='btn'>Zur ersten Episode</a>
</div> </div>
</div> </div>
......
...@@ -6,12 +6,35 @@ $( ".burger_menu" ).click(function() { ...@@ -6,12 +6,35 @@ $( ".burger_menu" ).click(function() {
} }
}); });
$('body').on('click','.btn, .nav-item, .logo', function() { $('body').on('click','.btn, .nav-item, logo, .video-item', function(e) {
var link = $(this).attr('ref');
load_page(link); 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").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 @@ ...@@ -9,8 +9,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref='overview.html' class='btn'>Zur Werkübersicht</a> <a href='overview.html' class='btn'>Zur Werkübersicht</a>
<a href='#' ref='video/video1.html' class='btn'>Zur ersten Episode</a> <a href='video/video1.html' class='btn'>Zur ersten Episode</a>
</div> </div>
</div> </div>
......
...@@ -12,70 +12,70 @@ ...@@ -12,70 +12,70 @@
<section class="video-grid"> <section class="video-grid">
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video1.jpg');"></div> <div class="video-img" style="background-image: url('video/video1.jpg');"></div>
<a href='#' src='video/video1.html'> <a href='video/video1.html'>
<span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span> <span class="video-title">Ehrung des Quadrats: Gelbes Zentrum</span>
<span class="video-description">Die ineinander geschachtelten, farbigen Quadrate in dem Werk von Josef Albers erinnern an das Spiel mit Matrjoschka-Puppen.</span> <span class="video-description">Die ineinander geschachtelten, farbigen Quadrate in dem Werk von Josef Albers erinnern an das Spiel mit Matrjoschka-Puppen.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video2.jpg');"></div> <div class="video-img" style="background-image: url('video/video2.jpg');"></div>
<a href='#' src='video/video2.html'> <a href='video/video2.html'>
<span class="video-title">Dynamische Struktur</span> <span class="video-title">Dynamische Struktur</span>
<span class="video-description">Heinz Mack entwickelt eine variierende und folgenreiche Bildstruktur. Sie ist Ausdruck einer künstlerischen Neuausrichtung in der Nachkriegszeit.</span> <span class="video-description">Heinz Mack entwickelt eine variierende und folgenreiche Bildstruktur. Sie ist Ausdruck einer künstlerischen Neuausrichtung in der Nachkriegszeit.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video3.jpg');"></div> <div class="video-img" style="background-image: url('video/video3.jpg');"></div>
<a href='#' src='video/video3.html'> <a href='video/video3.html'>
<span class="video-title">Überfall auf einen Geleitzug</span> <span class="video-title">Überfall auf einen Geleitzug</span>
<span class="video-description">Etliche Detailszenen sind in den Schlachtenbildern von Sebastian Vrancx zu erkennen. Dabei fällt eine wiederkehrende, einheitliche Typologie der Figuren auf.</span> <span class="video-description">Etliche Detailszenen sind in den Schlachtenbildern von Sebastian Vrancx zu erkennen. Dabei fällt eine wiederkehrende, einheitliche Typologie der Figuren auf.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video4.jpg');"></div> <div class="video-img" style="background-image: url('video/video4.jpg');"></div>
<a href='#' src='video/video4.html'> <a href='video/video4.html'>
<span class="video-title">Abendessen in der Scheune & co.</span> <span class="video-title">Abendessen in der Scheune & co.</span>
<span class="video-description">Der flämische Maler David Teniers der Jüngere inszeniert ausgelassene Dorffeste und Alltagsszenen. In seinen Werken finden sich zudem zahlreiche Stillleben.</span> <span class="video-description">Der flämische Maler David Teniers der Jüngere inszeniert ausgelassene Dorffeste und Alltagsszenen. In seinen Werken finden sich zudem zahlreiche Stillleben.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video5.jpg');"></div> <div class="video-img" style="background-image: url('video/video5.jpg');"></div>
<a href='#' src='video/video5.html'> <a href='video/video5.html'>
<span class="video-title">Take a long break I, II</span> <span class="video-title">Take a long break I, II</span>
<span class="video-description">Großformatige Fotografien, die eine Tasse zeigen, bewegen sich scheinbar magisch im Raum. Die Installation von Marijke van Warmerdam erzeugt Varianz innerhalb der Bewegung.</span> <span class="video-description">Großformatige Fotografien, die eine Tasse zeigen, bewegen sich scheinbar magisch im Raum. Die Installation von Marijke van Warmerdam erzeugt Varianz innerhalb der Bewegung.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video6.jpg');"></div> <div class="video-img" style="background-image: url('video/video6.jpg');"></div>
<a href='#' src='video/video6.html'> <a href='video/video6.html'>
<span class="video-title">Großes Stillleben mit Kerzen und Spiegel</span> <span class="video-title">Großes Stillleben mit Kerzen und Spiegel</span>
<span class="video-description">Der breite Spiegel hinter dem Stillleben im Ölgemälde von Max Beckmann reflektiert die Gegenstände auf ungewöhnliche Weise. Sie entwickeln scheinbar ein Eigenleben.</span> <span class="video-description">Der breite Spiegel hinter dem Stillleben im Ölgemälde von Max Beckmann reflektiert die Gegenstände auf ungewöhnliche Weise. Sie entwickeln scheinbar ein Eigenleben.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video7.jpg');"></div> <div class="video-img" style="background-image: url('video/video7.jpg');"></div>
<a href='#' src='video/video7.html'> <a href='video/video7.html'>
<span class="video-title">Van Gogh als verkannter Hochstapler</span> <span class="video-title">Van Gogh als verkannter Hochstapler</span>
<span class="video-description">Der Künstler Arnulf Rainer übermalt Fotografien von van Goghs Gemälden. Was zuerst zerstörerisch anmutet, eröffnet auf den zweiten Blick neue thematische Aspekte.</span> <span class="video-description">Der Künstler Arnulf Rainer übermalt Fotografien von van Goghs Gemälden. Was zuerst zerstörerisch anmutet, eröffnet auf den zweiten Blick neue thematische Aspekte.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video8.jpg');"></div> <div class="video-img" style="background-image: url('video/video8.jpg');"></div>
<a href='#' src='video/video8.html'> <a href='video/video8.html'>
<span class="video-title">Die heilige Elisabeth von Thüringen</span> <span class="video-title">Die heilige Elisabeth von Thüringen</span>
<span class="video-description">Täuschend echt stellt Grünewald zwei Heilige als Steinfiguren auf den Tafeln des Heller-Altars dar. Ein einheitlicher Bildaufbau erweckt den Eindruck einer Zusammengehörigkeit.</span> <span class="video-description">Täuschend echt stellt Grünewald zwei Heilige als Steinfiguren auf den Tafeln des Heller-Altars dar. Ein einheitlicher Bildaufbau erweckt den Eindruck einer Zusammengehörigkeit.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video9.jpg');"></div> <div class="video-img" style="background-image: url('video/video9.jpg');"></div>
<a href='#' 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-title">Markgraf Christoph I. von Baden mit seiner Familie</span>
<span class="video-description">Hans Baldung Grien portraitiert in dem Werk die 16-köpfige Familie des Markgraf von Baden. Im Gegensatz zum heutigen Gruppenporträt wirken die dargestellten Personen fast identisch.</span> <span class="video-description">Hans Baldung Grien portraitiert in dem Werk die 16-köpfige Familie des Markgraf von Baden. Im Gegensatz zum heutigen Gruppenporträt wirken die dargestellten Personen fast identisch.</span>
</a> </a>
</div> </div>
<div class="video-item"> <div class="video-item">
<div class="video-img" style="background-image: url('video/video10.jpg');"></div> <div class="video-img" style="background-image: url('video/video10.jpg');"></div>
<a href='#' src='video/video10.html'> <a href='video/video10.html'>
<span class="video-title">Bubbles</span> <span class="video-title">Bubbles</span>
<span class="video-description">Die digital projizierten Seifenblasen reagieren auf die Interaktion des Besuchers. In der Installation von Wolfgang Muench und Kiyoshi Furukawa treffen digitale und reale Welt aufeinander. </span> <span class="video-description">Die digital projizierten Seifenblasen reagieren auf die Interaktion des Besuchers. In der Installation von Wolfgang Muench und Kiyoshi Furukawa treffen digitale und reale Welt aufeinander. </span>
</a> </a>
...@@ -83,11 +83,5 @@ ...@@ -83,11 +83,5 @@
</section> </section>
<script src="js/main.js"></script> <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> </body>
</html> </html>
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="overview.html" class="btn">Zur Werkübersicht</a> <a href="overview.html" class="btn">Zur Werkübersicht</a>
<a href="#" ref='video/video2.html' class="btn">Zur nächsten Episode</a> <a href='video/video2.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video9.html" class="btn">Zur vorherigen Episode</a> <a href="video/video9.html" class="btn">Zur vorherigen Episode</a>
<a href="#" ref='overview.html' class="btn">Zur Werkübersicht</a> <a href='overview.html' class="btn">Zur Werkübersicht</a>
</div> </div>
</div> </div>
......
...@@ -69,8 +69,8 @@ ...@@ -69,8 +69,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video1.html" class="btn">Zur vorherigen Episode</a> <a href="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/video3.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video2.html" class="btn">Zur vorherigen Episode</a> <a href="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/video4.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video3.html" class="btn">Zur vorherigen Episode</a> <a href="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/video5.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video4.html" class="btn">Zur vorherigen Episode</a> <a href="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/video6.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video5.html" class="btn">Zur vorherigen Episode</a> <a href="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/video7.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -38,7 +38,7 @@ ...@@ -38,7 +38,7 @@
<div class="description"> <div class="description">
<h2>Arnulf Rainer - Van Gogh als verkannter Hochstapler (1977), Van Gogh im schwarzen Schein (1977-79)</h2> <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;"> <div style="text-align: justify;">
<p> <p>
Nam distinctio voluptates quidem possimus unde quidem alias. Non nam qui molestias eveniet eos optio minus. Nam distinctio voluptates quidem possimus unde quidem alias. Non nam qui molestias eveniet eos optio minus.
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video6.html" class="btn">Zur vorherigen Episode</a> <a href="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/video8.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -68,8 +68,8 @@ ...@@ -68,8 +68,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video7.html" class="btn">Zur vorherigen Episode</a> <a href="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/video9.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</div> </div>
......
...@@ -76,8 +76,8 @@ ...@@ -76,8 +76,8 @@
</div> </div>
<div class="video-navigation"> <div class="video-navigation">
<a href='#' ref="video/video8.html" class="btn">Zur vorherigen Episode</a> <a href="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/video10.html' class="btn">Zur nächsten Episode</a>
</div> </div>
</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