add video navigation

91e647d8 · Jonas Heinrich · de5827a5 · 91e647d8 · 91e647d8 · 91e647d8
Commit 91e647d8 authored Feb 09, 2018 by Jonas Heinrich
14 changed files
--- a/css/main.css
+++ b/css/main.css
@@ -215,14 +215,30 @@ h1, h2, h3, h4, h5, h6 {
  height: 50px;
  display: flex;
  text-align: center;
-  vertical-align: middle;
 }

 .btn {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
-  border: 1px solid transparent;
-  vertical-align: middle;
+  border: 1px solid;
  flex: 1;
+  line-height: 3.5em;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.btn:hover {
+  background-color: #155724;
+  color: #d4edda;
+}
+
+.btn a {
+  text-decoration: none;
+  color:inherit;
+}
+
+.btn.disabled{
+  pointer-events: none;
+  background-color: grey;
 }
--- a/index.html
+++ b/index.html
@@ -76,6 +76,16 @@
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
          Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
        </div>
+
+        <div id="video-navigation">
+          <div class="btn">
+            <a href="#">< Vorheriges Objekt</a>
+          </div>
+          <div class="btn">
+            <a href="#" src="video/video2.html">Nächstes Objekt ></a>
+          </div>
+        </div>
+
      </content>
    </div>


--- a/js/main.js
+++ b/js/main.js
 $( "#overview" ).click(function() {
-  $( "content" ).load( "overview.html" );
+  load_page( "overview.html" );
 });

 $( "#about" ).click(function() {
-  $( "content" ).load( "about.html" );
-});
-
-$("#video_item").mouseenter(function() {
-  $(".video_overlay").show();
-});
-
-$("#video_item").mouseleave(function() {
-  $(".video_overlay").show();
+  load_page( "about.html" );
 });

 $( "logo" ).click(function() {
@@ -21,3 +13,13 @@ $( "logo" ).click(function() {
    $("navigation").css("height","0px");
  }
 });
+
+$( ".btn + :not([class=disabled])" ).click(function() {
+  var link = $(this).find('a:first').attr('src');
+  load_page(link);
+});
+
+function load_page(link) {
+  $("content").empty();
+  $("content").hide().load(link).fadeIn('slow');
+}
--- a/js/map.js
+++ b/js/map.js
@@ -114,8 +114,7 @@ map.on('load', function() {

  map.on('click', 'exhibits', function (e) {
    var link = e.features[0].properties.url;
-    $( "content" ).empty();
-    $("content").hide().load(link).fadeIn('slow');
+    load_page(link);
  });

 });
--- a/video/video1.html
+++ b/video/video1.html
@@ -49,14 +49,13 @@

    <div id="video-navigation">
      <div class="btn disabled">
-        < Vorheriges Objekt
+        <a href="#">< Vorheriges Objekt</a>
      </div>
      <div class="btn">
-        Nächstes Objekt >
+        <a href="#" src="video/video2.html">Nächstes Objekt ></a>
      </div>
    </div>

-  </content>
  </div>

  </body>
@@ -65,8 +64,9 @@
    $(document).ready(function(){
    	$('#player').videre();

-      $('.next')click(function() {
-        $( "content" ).load( "video2.html" );
+      $( ".btn " ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
      });
    });
  </script>

--- a/video/video10.html
+++ b/video/video10.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video9.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn disabled">
+        <a href="#">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });      
    });
  </script>
 </html>
--- a/video/video2.html
+++ b/video/video2.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video1.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video3.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });
    });
  </script>
 </html>
--- a/video/video3.html
+++ b/video/video3.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video2.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video4.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn " ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });
    });
  </script>
 </html>
--- a/video/video4.html
+++ b/video/video4.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video3.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video5.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });
    });
  </script>
 </html>
--- a/video/video5.html
+++ b/video/video5.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video4.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video6.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });      
    });
  </script>
 </html>
--- a/video/video6.html
+++ b/video/video6.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video5.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video7.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });      
    });
  </script>
 </html>
--- a/video/video7.html
+++ b/video/video7.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video6.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video8.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });      
    });
  </script>
 </html>
--- a/video/video8.html
+++ b/video/video8.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video7.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video9.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });      
    });
  </script>
 </html>
--- a/video/video9.html
+++ b/video/video9.html
@@ -46,7 +46,14 @@
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
      Bla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla blaBla bla bla Bla bla bla Bla bla bla
    </div>
-    </content>
+
+    <div id="video-navigation">
+      <div class="btn">
+        <a href="#" src="video/video8.html">< Vorheriges Objekt</a>
+      </div>
+      <div class="btn">
+        <a href="#" src="video/video10.html">Nächstes Objekt ></a>
+      </div>
    </div>

  </body>
@@ -54,6 +61,11 @@
  <script language="javascript">
    $(document).ready(function(){
    	$('#player').videre();
+
+      $( ".btn" ).click(function() {
+        var link = $(this).find('a:first').attr('src');
+        load_page(link);
+      });      
    });
  </script>
 </html>