Skip to content

W
web-ausstellung-virtuell.de
Commit 91e647d8 authored by Jonas Heinrich's avatar Jonas Heinrich
Browse files
Options

add video navigation

parent de5827a5
Hide whitespace changes
Inline Side-by-side
Showing with 164 additions and 29 deletions
css/main.css
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
$( "#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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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
View file @ 91e647d8
......@@ -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