Commit 91e647d8 authored by Jonas Heinrich's avatar Jonas Heinrich

add video navigation

parent de5827a5
......@@ -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;
}
......@@ -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>
......
$( "#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');
}
......@@ -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);
});
});
......@@ -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>
......
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -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>
......@@ -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>
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