cdelorme
/
show


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
							<!doctype html>
<html lang='en'>
<head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width'>
    <title>Show</title>
    <style type='text/css'>
        * { margin: 0; padding: 0; }
        html, body, main { height: 100%; width: 100%; }
        body { background: #000; }
        video, img { display: block; margin: 0 auto; cursor: none; }
        .fillwidth { width: 100%; height: auto; }
        .fillheight { height: 100%; width: auto; }
        footer { display: none; height: 0; width: 0; }
    </style>
</head>
<body>
    <main></main>
    <footer>
        <script src='show.js'></script>
        <script>
            let files = [
                'image.png',
                'image.jpg',
                {
                    file: 'animated.gif',
                    delay: 5,
                    latency: 960
                },
                {
                    file: 'substitute/%s.png',
                    range: [4, 9],
                },
                {
                    file: 'substitutev2/%s.png',
                    range: ["one", "two", "three", "four"],
                },
                {
                    file: 'prefixed-group/%03s.png',
                    range: [1, 200],
                    delay: 200,
                },
                {
                    file: 'video.webm',
                    delay: 3,
                },
                {
                    file: 'video.mp4',
                    delay: 5,
                },
            ];
            let s = new Show(document.getElementsByTagName('main')[0], files, 1500);
        </script>
    </footer>
</body>
</html>