* added keyboard bindings and fullscreen to galleria iframe

This commit is contained in:
Reinhard Pointner 2015-06-01 19:12:24 +00:00
parent d7977457dc
commit 3c0e3c8eb8
5 changed files with 16 additions and 10 deletions

View File

@ -477,7 +477,7 @@ div.screencast:hover .play {
display: block;
margin: 0 auto;
width: 750px;
height: 480px;
height: 465px;
background-color: black;
border: 4px black solid;
box-shadow: 2px 2px 5px #a2a2a2;

View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
@ -14,9 +14,7 @@
<title>Getting Started</title>
</head>
<body>
<div class="galleria">
</div>
<div class="galleria"></div>
<script>
var data = [
{ link: 'https://www.youtube.com/watch?v=RRq2_Pjyko8&index=1&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/rename.png', thumb: 'images/rename.thumb.png' },
@ -50,6 +48,10 @@
this.lazyLoadChunks( data.length )
}
});
this.attachKeyboard({
left: this.prev,
right: this.next
});
});
</script>
</body>

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

View File

@ -1,7 +1,7 @@
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="galleria/galleria-1.4.2.min.js"></script>
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
@ -10,13 +10,13 @@
div.galleria{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; bottom: 0; }
div.galleria-thumbnails { margin: auto; }
div.galleria-thumbnails-list div.galleria-image { max-height: 20px; }
img.fullscreen { position: absolute; top: 5px; right: 5px; z-index: 10; cursor: pointer; opacity: 0.3 }
</style>
<title>Getting Started</title>
</head>
<body>
<div class="galleria">
</div>
<img class="fullscreen" src="fullscreen.png" width="16" height="16" onclick="$('.galleria').data('galleria').toggleFullscreen()" />
<div class="galleria"></div>
<script>
var data = [
{ video: 'http://www.youtube.com/watch?v=RRq2_Pjyko8', image: 'images/rename.png', thumb: 'images/rename.thumb.png' },
@ -50,6 +50,10 @@
this.lazyLoadChunks( data.length )
}
});
this.attachKeyboard({
left: this.prev,
right: this.next
});
});
</script>
</body>

View File

@ -214,7 +214,7 @@
<p>If you have any questions or problems just to check the <a href="https://www.filebot.net/forums/viewtopic.php?f=3&amp;t=7">FAQ</a> or search the <a href="https://www.filebot.net/forums/">forums</a>.</p>
<div class="video">
<iframe src="http://app.filebot.net/getting-started/index.html" frameborder="0"></iframe>
<iframe src="http://app.filebot.net/getting-started/index.html" frameborder="0" allowfullscreen="true"></iframe>
</div>
</div>