Commit ef3a78f5 authored by Jonas Heinrich's avatar Jonas Heinrich

redisgn video navigation menu

parent 25251607
...@@ -149,27 +149,30 @@ h1, h2, h3, h4, h5, h6 { ...@@ -149,27 +149,30 @@ h1, h2, h3, h4, h5, h6 {
color: black; color: black;
} }
#video-navigation {
width: 100%;
height: 50px;
display: flex;
text-align: center;
}
.btn { .btn {
color: #155724; font-family: 'Open Sans', sans-serif;
background-color: #d4edda; /* background-color: rgb(58, 160, 255); */
border-color: #c3e6cb; background-color: rgb(109, 119, 129);
border: 1px solid; text-align: center;
flex: 1; line-height: 42px;
line-height: 3.5em; font-weight: 700;
text-decoration: none; color: #fff;
cursor: pointer; border-radius: 3px;
} text-decoration: none;
opacity: 1;
.btn:hover { margin-top: 10px;
background-color: #155724; margin-right: 10px;
color: #d4edda; width: 47%;
border-bottom: 3px solid rgb(212, 219, 224);
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.expand {
display: inline-block;
} }
.btn a { .btn a {
...@@ -177,7 +180,14 @@ h1, h2, h3, h4, h5, h6 { ...@@ -177,7 +180,14 @@ h1, h2, h3, h4, h5, h6 {
color:inherit; color:inherit;
} }
.btn.disabled{ .btn:hover{
pointer-events: none; background-color: rgb(212, 219, 224);
background-color: grey; color: rgb(109, 119, 129);
}
.video-navigation {
position: absolute;
bottom: 35px;
width: 580px;
padding-left: 40px;
} }
...@@ -34,59 +34,14 @@ ...@@ -34,59 +34,14 @@
<content> <content>
<div id="player" class="vid-wrapper videre-container mouse-entered" style="width: 100%;">
<div class="vid-html5">
<video src="video/oceans.mp4" id="html-player" style="width: 100%;" poster="images/video1_poster.png"></video>
</div>
<div class="vid-toggle-layer"></div>
<div class="vid-shadow-layer"></div>
<div class="vid-controls-bottom flex align-center justify-center">
<div class="vid-controls-wrapper">
<div class="vid-controls-contents flex align-center justify-center">
<button class="vid-play-btn item"><i class="ion-ios-play flex align-center"></i></button>
<div class="vid-volume-container flex align-center">
<button class="vid-volume-control item"><i class="ion-android-volume-up flex align-center"></i></button>
<div id="vol-control" class="vid-volume-slider"></div>
</div>
<span class="vid-current-time"></span>
<div class="vid-progress">
<div class="progress-bg"></div>
<div class="progress-loaded"></div>
<div class="progress-fg"></div>
<div class="progress-hovertime"></div>
</div>
<span class="vid-duration"></span>
<button class="vid-request-fullscreen item"><i class="ion-android-expand flex align-center"></i></button>
</div>
</div>
</div>
<div class="vid-bottom-progress-bar">
<div class="progress-fg"></div>
</div>
</div>
<div class="description"> <div class="description">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2> <h2>Werkübersicht</h2>
<p class="prose-big">Bla bla</p> Unsere Virtuelle-Ausstellung beginnt mit velit magni aliquid minus. Repellendus et harum consectetur alias ad. Suscipit vel assumenda quia similique et quia doloribus. Maiores sed animi voluptate et perferendis eum quia. Et est veniam temporibus quia ipsa repudiandae autem quo. Sed harum assumenda accusantium mollitia.
Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla Bla bla bla
Bla bla bla Bla bla bla Bla bla bla
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 bla
Bla 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 bla
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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src='overview.html' class="btn expand">Zur Werkübersicht</a>
<a href="#">< Vorheriges Objekt</a> <a href='#' src='video/video1.html' class="btn expand">Zur ersten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video2.html">Nächstes Objekt ></a>
</div>
</div> </div>
</content> </content>
...@@ -103,6 +58,10 @@ ...@@ -103,6 +58,10 @@
$(document).ready(function(){ $(document).ready(function(){
$('#player').videre(); $('#player').videre();
}); });
$( ".btn " ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
</script> </script>
</body> </body>
......
...@@ -46,16 +46,11 @@ ...@@ -46,16 +46,11 @@
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 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 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>
</div>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn disabled"> <a href='#' src="overview.html" class="btn expand">Zur Werkübersicht</a>
<a href="#">< Vorheriges Objekt</a> <a href="#" src='video/video2.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video2.html">Nächstes Objekt ></a>
</div>
</div>
</div> </div>
</body> </body>
...@@ -65,7 +60,7 @@ ...@@ -65,7 +60,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn " ).click(function() { $( ".btn " ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,15 +47,10 @@ ...@@ -47,15 +47,10 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video9.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video9.html">< Vorheriges Objekt</a> <a href="#" src='overview.html' class="btn expand">Zur Werkübersicht</a>
</div>
<div class="btn disabled">
<a href="#">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
<script language="javascript"> <script language="javascript">
...@@ -63,7 +58,7 @@ ...@@ -63,7 +58,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video1.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video1.html">< Vorheriges Objekt</a> <a href="#" src='video/video3.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video3.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video2.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video2.html">< Vorheriges Objekt</a> <a href="#" src='video/video4.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video4.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -62,8 +58,8 @@ ...@@ -62,8 +58,8 @@
$(document).ready(function(){ $(document).ready(function(){
$('#player').videre(); $('#player').videre();
$( ".btn " ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video3.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video3.html">< Vorheriges Objekt</a> <a href="#" src='video/video4.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video5.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video4.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video4.html">< Vorheriges Objekt</a> <a href="#" src='video/video6.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video6.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video5.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video5.html">< Vorheriges Objekt</a> <a href="#" src='video/video7.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video7.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video6.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video6.html">< Vorheriges Objekt</a> <a href="#" src='video/video8.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video8.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video7.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video7.html">< Vorheriges Objekt</a> <a href="#" src='video/video9.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video9.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
...@@ -47,13 +47,9 @@ ...@@ -47,13 +47,9 @@
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 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>
<div id="video-navigation"> <div class="video-navigation">
<div class="btn"> <a href='#' src="video/video8.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src="video/video8.html">< Vorheriges Objekt</a> <a href="#" src='video/video10.html' class="btn expand">Zur nächsten Episode</a>
</div>
<div class="btn">
<a href="#" src="video/video10.html">Nächstes Objekt ></a>
</div>
</div> </div>
</body> </body>
...@@ -63,7 +59,7 @@ ...@@ -63,7 +59,7 @@
$('#player').videre(); $('#player').videre();
$( ".btn" ).click(function() { $( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src'); var link = $(this).attr('src');
load_page(link); load_page(link);
}); });
}); });
......
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