* simplify and unify getting started pages & js
This commit is contained in:
Reinhard Pointner
parent
9745647987
commit
5f3289a7f6
|
|
@ -1,58 +1,13 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<script src="index.js"></script>
|
||||
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
|
||||
<style>
|
||||
body{ margin: 0; padding: 0; background: #000; }
|
||||
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; }
|
||||
</style>
|
||||
<title>Getting Started</title>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<body onload="runGalleria()">
|
||||
<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' },
|
||||
{ link: 'https://www.youtube.com/watch?v=btNSv7AnMMw&index=2&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/episodes.png', thumb: 'images/episodes.thumb.png' },
|
||||
{ link: 'https://www.youtube.com/watch?v=q-oZ_hovsTY&index=3&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/subtitle-hash-lookup.png', thumb: 'images/subtitle-hash-lookup.thumb.png' },
|
||||
{ link: 'https://www.youtube.com/watch?v=R80tKtHf4zw&index=4&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/subtitle-search.png', thumb: 'images/subtitle-search.thumb.png' },
|
||||
{ link: 'https://www.youtube.com/watch?v=4KWkSPr3fQY&index=5&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd', image: 'images/sfv.png', thumb: 'images/sfv.thumb.png' }
|
||||
];
|
||||
|
||||
if (location.hash == '#mas') {
|
||||
data.splice(1, 0, { image: 'images/permissions.png', thumb: 'images/permissions.thumb.png' }) // sandbox permissions
|
||||
} else if (location.hash == '#usc') {
|
||||
data[0].link = 'https://www.youtube.com/watch?v=sEFP3CsntNs&index=6&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd' // ubuntu video
|
||||
}
|
||||
|
||||
Galleria.run('.galleria', {
|
||||
popupLinks: true,
|
||||
dataSource: data,
|
||||
maxScaleRatio: 1,
|
||||
youtube: {
|
||||
VQ: 'HD1080'
|
||||
},
|
||||
thumbnails: 'lazy'
|
||||
});
|
||||
|
||||
var loaded = true
|
||||
Galleria.ready(function() {
|
||||
this.bind("image", function(e) {
|
||||
if (loaded) {
|
||||
loaded = false
|
||||
this.lazyLoadChunks( data.length )
|
||||
}
|
||||
});
|
||||
this.attachKeyboard({
|
||||
left: this.prev,
|
||||
right: this.next
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
|
||||
function isFullScreen() {
|
||||
return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen;
|
||||
}
|
||||
|
||||
function requestFullScreen(element) {
|
||||
if (element.requestFullscreen)
|
||||
element.requestFullscreen();
|
||||
else if (element.msRequestFullscreen)
|
||||
element.msRequestFullscreen();
|
||||
else if (element.mozRequestFullScreen)
|
||||
element.mozRequestFullScreen();
|
||||
else if (element.webkitRequestFullscreen)
|
||||
element.webkitRequestFullscreen();
|
||||
}
|
||||
|
||||
function exitFullScreen() {
|
||||
if (document.exitFullscreen)
|
||||
document.exitFullscreen();
|
||||
else if (document.msExitFullscreen)
|
||||
document.msExitFullscreen();
|
||||
else if (document.mozCancelFullScreen)
|
||||
document.mozCancelFullScreen();
|
||||
else if (document.webkitExitFullscreen)
|
||||
document.webkitExitFullscreen();
|
||||
}
|
||||
|
||||
function toggleFullScreen(element) {
|
||||
if (isFullScreen())
|
||||
exitFullScreen();
|
||||
else
|
||||
requestFullScreen(element || document.documentElement);
|
||||
}
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
|
|
@ -1,61 +1,15 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<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>
|
||||
<script src="fullscreen.js"></script>
|
||||
<script src="index.js"></script>
|
||||
<link rel="stylesheet" href="galleria/themes/classic/galleria.classic.css">
|
||||
<style>
|
||||
body{ margin: 0; padding: 0; background: #000; }
|
||||
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>
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<title>Getting Started</title>
|
||||
</head>
|
||||
<body>
|
||||
<body onload="runGalleria()">
|
||||
<img class="fullscreen" src="fullscreen.png" width="16" height="16" onclick="toggleFullScreen()" />
|
||||
<div class="galleria"></div>
|
||||
<script>
|
||||
var data = [
|
||||
{ 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' },
|
||||
{ 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' },
|
||||
{ image: 'images/sfv.screenshot.png', thumb: 'images/sfv.screenshot.thumb.png' },
|
||||
{ image: 'images/cli.screenshot.png', thumb: 'images/cli.screenshot.thumb.png' },
|
||||
{ image: 'images/node.screenshot.png', thumb: 'images/node.screenshot.thumb.png' }
|
||||
];
|
||||
|
||||
Galleria.run('.galleria', {
|
||||
dataSource: data,
|
||||
maxScaleRatio: 1,
|
||||
youtube: {
|
||||
VQ: 'HD1080'
|
||||
},
|
||||
thumbnails: 'lazy'
|
||||
});
|
||||
|
||||
var loaded = true
|
||||
Galleria.ready(function() {
|
||||
this.bind("image", function(e) {
|
||||
if (loaded) {
|
||||
loaded = false
|
||||
this.lazyLoadChunks( data.length )
|
||||
}
|
||||
});
|
||||
this.attachKeyboard({
|
||||
left: this.prev,
|
||||
right: this.next
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
|
||||
function getData() {
|
||||
var data = [{
|
||||
link: 'https://www.youtube.com/watch?v=RRq2_Pjyko8&index=1&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
|
||||
video: 'http://app.filebot.net/getting-started/videos/rename.mp4',
|
||||
image: 'images/rename.png',
|
||||
thumb: 'images/rename.thumb.png'
|
||||
}, {
|
||||
link: 'https://www.youtube.com/watch?v=btNSv7AnMMw&index=2&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
|
||||
video: 'http://app.filebot.net/getting-started/videos/episodes.mp4',
|
||||
image: 'images/episodes.png',
|
||||
thumb: 'images/episodes.thumb.png'
|
||||
}, {
|
||||
link: 'https://www.youtube.com/watch?v=q-oZ_hovsTY&index=3&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
|
||||
video: 'http://app.filebot.net/getting-started/videos/subtitle-lookup.mp4',
|
||||
image: 'images/subtitle-hash-lookup.png',
|
||||
thumb: 'images/subtitle-hash-lookup.thumb.png'
|
||||
}, {
|
||||
link: 'https://www.youtube.com/watch?v=R80tKtHf4zw&index=4&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
|
||||
video: 'http://app.filebot.net/getting-started/videos/subtitle-search.mp4',
|
||||
image: 'images/subtitle-search.png',
|
||||
thumb: 'images/subtitle-search.thumb.png'
|
||||
}, {
|
||||
link: 'https://www.youtube.com/watch?v=4KWkSPr3fQY&index=5&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd',
|
||||
video: 'http://app.filebot.net/getting-started/videos/sfv.mp4',
|
||||
image: 'images/sfv.png',
|
||||
thumb: 'images/sfv.thumb.png'
|
||||
}, {
|
||||
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'
|
||||
}, {
|
||||
image: 'images/sfv.screenshot.png',
|
||||
thumb: 'images/sfv.screenshot.thumb.png'
|
||||
}, {
|
||||
image: 'images/cli.screenshot.png',
|
||||
thumb: 'images/cli.screenshot.thumb.png'
|
||||
}, {
|
||||
image: 'images/node.screenshot.png',
|
||||
thumb: 'images/node.screenshot.thumb.png'
|
||||
}]
|
||||
|
||||
var links = location.hash.length > 0
|
||||
var youtube = navigator.language != 'zh-cn' // YouTube is blocked in China (mainland)
|
||||
|
||||
if (links) {
|
||||
data = data.slice(0, 5) // use only tutorial images
|
||||
|
||||
if (location.hash == '#mas') {
|
||||
data.splice(1, 0, {
|
||||
image: 'images/permissions.png',
|
||||
thumb: 'images/permissions.thumb.png'
|
||||
}) // sandbox permissions
|
||||
} else if (location.hash == '#usc') {
|
||||
data[0].link = 'https://www.youtube.com/watch?v=sEFP3CsntNs&index=6&list=PLdPvEJhzxLMCEJJpb1mJtVkOpS7FfALnd' // ubuntu video
|
||||
}
|
||||
}
|
||||
|
||||
if (!links) {
|
||||
data.forEach(function(it) {
|
||||
it.video = it[youtube ? 'link' : 'video']
|
||||
})
|
||||
}
|
||||
if (!youtube) {
|
||||
data.forEach(function(it) {
|
||||
it[links ? 'link' : 'iframe'] = it.video
|
||||
delete it.video
|
||||
})
|
||||
}
|
||||
return data
|
||||
}
|
||||
|
||||
function runGalleria() {
|
||||
var data = getData()
|
||||
|
||||
Galleria.run('.galleria', {
|
||||
dataSource: data,
|
||||
popupLinks: true,
|
||||
maxScaleRatio: 1,
|
||||
youtube: {
|
||||
VQ: 'HD1080'
|
||||
},
|
||||
thumbnails: 'lazy'
|
||||
})
|
||||
|
||||
Galleria.ready(function() {
|
||||
this.bind("image", function(e) {
|
||||
if (this.doLazyLoadChunks !== false) {
|
||||
this.doLazyLoadChunks = false
|
||||
this.lazyLoadChunks(data.length)
|
||||
}
|
||||
})
|
||||
this.attachKeyboard({
|
||||
left: this.prev,
|
||||
right: this.next
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
function isFullScreen() {
|
||||
return (document.fullScreenElement && document.fullScreenElement !== null) || document.mozFullScreen || document.webkitIsFullScreen
|
||||
}
|
||||
|
||||
function requestFullScreen(element) {
|
||||
if (element.requestFullscreen)
|
||||
element.requestFullscreen()
|
||||
else if (element.msRequestFullscreen)
|
||||
element.msRequestFullscreen()
|
||||
else if (element.mozRequestFullScreen)
|
||||
element.mozRequestFullScreen()
|
||||
else if (element.webkitRequestFullscreen)
|
||||
element.webkitRequestFullscreen()
|
||||
}
|
||||
|
||||
function exitFullScreen() {
|
||||
if (document.exitFullscreen)
|
||||
document.exitFullscreen()
|
||||
else if (document.msExitFullscreen)
|
||||
document.msExitFullscreen()
|
||||
else if (document.mozCancelFullScreen)
|
||||
document.mozCancelFullScreen()
|
||||
else if (document.webkitExitFullscreen)
|
||||
document.webkitExitFullscreen()
|
||||
}
|
||||
|
||||
function toggleFullScreen(element) {
|
||||
if (isFullScreen())
|
||||
exitFullScreen()
|
||||
else
|
||||
requestFullScreen(element || document.documentElement)
|
||||
}
|
||||
Loading…
Reference in New Issue