Skip to content

Instantly share code, notes, and snippets.

@ekinertac
Created August 23, 2012 23:15
Show Gist options
  • Save ekinertac/3443272 to your computer and use it in GitHub Desktop.
Save ekinertac/3443272 to your computer and use it in GitHub Desktop.
WebKit supported full screen property
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
//list of images for the slideshow
var imageList = [
"http://dummyimage.com/300x500&text=asd",
"http://dummyimage.com/300x500&text=dsa",
"http://dummyimage.com/300x500&text=qwe"
];
var count = 0;
//invoke this when user wants to see a Full Screen Slideshow
function enterFullScreen(){
var elem = document.getElementById("slideshow");
elem.webkitRequestFullScreen();
setTimeout(changePicture, 3000);
}
function changePicture(){
count++;
//cycle through the list of images
document.getElementById("image1").src = imageList[count % imageList.length];
if (document.webkitIsFullScreen)
setTimeout(changePicture, 3000);
else
//if user exits the full screen mode
document.getElementById("image1").src = imageList[0];
}
</script>
</head>
<body>
<div id="slideshow">
<img id="image1" src="http://dummyimage.com/300x500&text=asd"><img>
</div>
<input type="button" value="Enter full screen mode" onclick="enterFullScreen()">
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment