add video navigation

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;
 }

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>
 

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');
+}

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);
   });
 
 });

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>