2015-05-09 09:56:35 +00:00
|
|
|
<!doctype html>
|
|
|
|
<html>
|
|
|
|
<head>
|
2015-06-01 19:12:24 +00:00
|
|
|
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
|
2015-05-09 09:56:35 +00:00
|
|
|
<script src="galleria/galleria-1.4.2.min.js"></script>
|
|
|
|
<script src="galleria/themes/classic/galleria.classic.min.js"></script>
|
2015-06-01 19:35:25 +00:00
|
|
|
<script src="fullscreen.js"></script>
|
2015-05-09 09:56:35 +00:00
|
|
|
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
|
|
|
|
<style>
|
2015-05-11 21:24:26 +00:00
|
|
|
body{ margin: 0; padding: 0; background: #000; }
|
2015-05-09 09:56:35 +00:00
|
|
|
div.galleria{ width: 100%; height: 100%; background: #000; position: absolute; top: 0; bottom: 0; }
|
2015-05-28 18:47:18 +00:00
|
|
|
div.galleria-thumbnails { margin: auto; }
|
|
|
|
div.galleria-thumbnails-list div.galleria-image { max-height: 20px; }
|
2015-06-01 19:12:24 +00:00
|
|
|
img.fullscreen { position: absolute; top: 5px; right: 5px; z-index: 10; cursor: pointer; opacity: 0.3 }
|
2015-05-09 09:56:35 +00:00
|
|
|
</style>
|
2015-05-09 10:17:26 +00:00
|
|
|
<title>Getting Started</title>
|
2015-05-09 09:56:35 +00:00
|
|
|
</head>
|
|
|
|
<body>
|
2015-06-01 19:35:25 +00:00
|
|
|
<img class="fullscreen" src="fullscreen.png" width="16" height="16" onclick="toggleFullScreen()" />
|
2015-06-01 19:12:24 +00:00
|
|
|
<div class="galleria"></div>
|
2015-05-09 09:56:35 +00:00
|
|
|
<script>
|
2015-05-09 17:45:12 +00:00
|
|
|
var data = [
|
2015-06-05 08:17:49 +00:00
|
|
|
{ iframe: 'videos/rename.mp4', image: 'images/rename.png', thumb: 'images/rename.thumb.png' },
|
|
|
|
{ iframe: 'videos/episodes.mp4', image: 'images/episodes.png', thumb: 'images/episodes.thumb.png' },
|
|
|
|
{ iframe: 'videos/subtitle-lookup.mp4', image: 'images/subtitle-hash-lookup.png', thumb: 'images/subtitle-hash-lookup.thumb.png' },
|
|
|
|
{ iframe: 'videos/subtitle-search.mp4', image: 'images/subtitle-search.png', thumb: 'images/subtitle-search.thumb.png' },
|
|
|
|
{ iframe: 'videos/sfv.mp4', image: 'images/sfv.png', thumb: 'images/sfv.thumb.png' },
|
2015-06-01 13:42:52 +00:00
|
|
|
{ image: 'images/rename.screenshot.png', thumb: 'images/rename.screenshot.thumb.png' },
|
|
|
|
{ image: 'images/format.screenshot.png', thumb: 'images/format.screenshot.thumb.png' },
|
|
|
|
{ image: 'images/subtitle-hash-lookup.screenshot.png', thumb: 'images/subtitle-hash-lookup.screenshot.thumb.png' },
|
|
|
|
{ image: 'images/subtitle-search.screenshot.png', thumb: 'images/subtitle-search.screenshot.thumb.png' },
|
2015-06-01 14:07:55 +00:00
|
|
|
{ image: 'images/sfv.screenshot.png', thumb: 'images/sfv.screenshot.thumb.png' },
|
2015-06-01 15:47:23 +00:00
|
|
|
{ image: 'images/cli.screenshot.png', thumb: 'images/cli.screenshot.thumb.png' },
|
2015-06-01 14:07:55 +00:00
|
|
|
{ image: 'images/node.screenshot.png', thumb: 'images/node.screenshot.thumb.png' }
|
2015-05-09 17:45:12 +00:00
|
|
|
];
|
2015-05-11 21:24:26 +00:00
|
|
|
|
2015-05-09 09:56:35 +00:00
|
|
|
Galleria.run('.galleria', {
|
2015-05-09 17:45:12 +00:00
|
|
|
dataSource: data,
|
2015-05-09 10:17:26 +00:00
|
|
|
maxScaleRatio: 1,
|
|
|
|
youtube: {
|
|
|
|
VQ: 'HD1080'
|
2015-05-28 18:47:18 +00:00
|
|
|
},
|
|
|
|
thumbnails: 'lazy'
|
|
|
|
});
|
|
|
|
|
|
|
|
var loaded = true
|
|
|
|
Galleria.ready(function() {
|
|
|
|
this.bind("image", function(e) {
|
|
|
|
if (loaded) {
|
|
|
|
loaded = false
|
|
|
|
this.lazyLoadChunks( data.length )
|
|
|
|
}
|
|
|
|
});
|
2015-06-01 19:12:24 +00:00
|
|
|
this.attachKeyboard({
|
|
|
|
left: this.prev,
|
|
|
|
right: this.next
|
|
|
|
});
|
2015-05-09 09:56:35 +00:00
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
2015-05-28 18:47:18 +00:00
|
|
|
</html>
|