I can't take all the credit for this. I have to acknowledge the great work done by HTML5 Demos. What I did was, simplify some of the JavaScript and CSS. I then used Twitter Bootstrap as a template, so to make this work, you'll have to make that download. I also made use of the carousel library which came with Twitter Bootstrap. You'll also have to download jQuery and refer to it as I have.
Here's how it works. You load put the page in your browser. When loaded, you press the 'f' jey to make the page full screen. Press the 'enter' key to move forward through the slideshow. Press the backspace key to move back. Press the 'Esc' key when you've done.
I've tested it on Chrome and Firefox. I believe there's another popular browser, but it's not installed on my computer.
Anyway. Here's the code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fullscreen demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<!-- <link href="application/application.css" rel="stylesheet"> -->
<style>
::-webkit-scrollbar
{
width:15px;
background:white;
}
::-webkit-scrollbar-thumb
{
box-shadow:inset 0 0 99px rgba(0,0,0,.2);
border:solid transparent;
border-width:6px 4px;
}
html, body
{
height:100%;
background:white;
overflow-y:auto;
overflow-x:hidden;
}
:-webkit-full-screen-document
{
}
:-webkit-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
:-moz-full-screen:not(:root)
{
width:100% !important;
float:none !important;
}
#fs:-webkit-full-screen
{
width:98%;
height:98%;
background-color:white;
}
.carousel-inner .item
{
margin-left:80px;
}
</style>
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div id="fs">
<div class="container">
<div class="page-header">
<h1>f for full screen, Esc for quit.</h1>
</div>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">
<ul>
<li>First bullet</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="item">
<ul>
<li>Fourth bullet</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
</div>
<div class="item">
<ul>
<li>Seventh bullet</li>
<li>Eighth</li>
<li>Ninth</li>
</ul>
</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</div>
</div>
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(document).keyup(function(event)
{
$('.carousel').carousel('pause');
if (event.keyCode === 13)
{
$('a.carousel-control.right').trigger('click');
}
if (event.keyCode === 8)
{
$('a.carousel-control.left').trigger('click');
}
});
var elem = document.querySelector(document.webkitExitFullscreen ? '#fs' : 'body');
document.addEventListener('keydown', function(e)
{
switch (e.keyCode)
{
case 70:
enterFullscreen();
break;
}
}, false);
function enterFullscreen()
{
if (elem.webkitRequestFullscreen)
{
elem.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
else
{
if (elem.mozRequestFullScreen)
{
elem.mozRequestFullScreen();
}
else
{
elem.requestFullscreen();
}
}
}
</script>
</body>
</html>
No comments:
Post a Comment