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 {
color: black;
}
#video-navigation {
width: 100%;
height: 50px;
display: flex;
text-align: center;
}
.btn {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
border: 1px solid;
flex: 1;
line-height: 3.5em;
text-decoration: none;
cursor: pointer;
}
.btn:hover {
background-color: #155724;
color: #d4edda;
font-family: 'Open Sans', sans-serif;
/* background-color: rgb(58, 160, 255); */
background-color: rgb(109, 119, 129);
text-align: center;
line-height: 42px;
font-weight: 700;
color: #fff;
border-radius: 3px;
text-decoration: none;
opacity: 1;
margin-top: 10px;
margin-right: 10px;
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 {
......@@ -177,7 +180,14 @@ h1, h2, h3, h4, h5, h6 {
color:inherit;
}
.btn.disabled{
pointer-events: none;
background-color: grey;
.btn:hover{
background-color: rgb(212, 219, 224);
color: rgb(109, 119, 129);
}
.video-navigation {
position: absolute;
bottom: 35px;
width: 580px;
padding-left: 40px;
}
......@@ -34,59 +34,14 @@
<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">
<h2>Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)</h2>
<p class="prose-big">Bla bla</p>
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
<h2>Werkübersicht</h2>
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.
</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 class="video-navigation">
<a href='#' src='overview.html' class="btn expand">Zur Werkübersicht</a>
<a href='#' src='video/video1.html' class="btn expand">Zur ersten Episode</a>
</div>
</content>
......@@ -103,6 +58,10 @@
$(document).ready(function(){
$('#player').videre();
});
$( ".btn " ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
</script>
</body>
......
......@@ -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 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="btn disabled">
<a href="#">< Vorheriges Objekt</a>
</div>
<div class="btn">
<a href="#" src="video/video2.html">Nächstes Objekt ></a>
</div>
</div>
<div class="video-navigation">
<a href='#' src="overview.html" class="btn expand">Zur Werkübersicht</a>
<a href="#" src='video/video2.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -65,7 +60,7 @@
$('#player').videre();
$( ".btn " ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video9.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='overview.html' class="btn expand">Zur Werkübersicht</a>
</div>
</body>
<script language="javascript">
......@@ -63,7 +58,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video1.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video3.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video2.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video4.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -62,8 +58,8 @@
$(document).ready(function(){
$('#player').videre();
$( ".btn " ).click(function() {
var link = $(this).find('a:first').attr('src');
$( ".btn" ).click(function() {
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video3.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video4.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video4.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video6.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video5.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video7.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video6.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video8.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video7.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video9.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
load_page(link);
});
});
......
......@@ -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
</div>
<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 class="video-navigation">
<a href='#' src="video/video8.html" class="btn expand">Zur vorherigen Episode</a>
<a href="#" src='video/video10.html' class="btn expand">Zur nächsten Episode</a>
</div>
</body>
......@@ -63,7 +59,7 @@
$('#player').videre();
$( ".btn" ).click(function() {
var link = $(this).find('a:first').attr('src');
var link = $(this).attr('src');
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