Beispiel:JS-Fullscreen-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <title>Fullscreen - 2</title>
  <style>
:-ms-fullscreen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:-webkit-full-screen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

:fullscreen img {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0; 
  left:0;
  object-fit: contain;
  background: none;
}

figure { 
 width: 33%;
 float: right;
 margin-right: 2em;
}

figure img {
  width: 100%;
}
kbd {
    background: #f9f9f9 linear-gradient(to bottom, #eee, #f9f9f9, #eee) repeat scroll 0 0;
    border: thin solid #aaa;
    border-radius: 2px;
    box-shadow: 1px 2px 2px #ddd;
    font-family: inherit;
    font-size: 0.9em;
    padding: 0 0.5em;
}
</style>

<script>
'use strict'; 
document.addEventListener('DOMContentLoaded', function () {
	document.addEventListener('click', toggleFullScreen);
});	
    
  function toggleFullScreen() {
		var element = document.getElementById("stage");
    if (!document.Fullscreen && !document.webkitFullScreen && !document.msRequestFullscreen) {
      if(element.requestFullScreen) {
        element.requestFullScreen();
      } else if(element.webkitRequestFullScreen ) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
      } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
      } else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();	
     }
    } else {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      }
    }
  }



</script>

</head>
 
<body>
<h1>Fullscreen - 2</h1>

<p>
  Mit einem Klick auf das Bild öffnen Sie es im Vollbildmodus.<br>
  Mit <kbd>ESC</kbd> kehren Sie zur klassischen Ansicht zurück.
</p>
<figure id="stage">
  <img src="https://wiki.selfhtml.org/images/2/28/Peru-1.jpg" alt="Peru 2007: Cusco - Blick auf Ausangate">
</figure>
<p>
  Mit einem Klick auf das Bild öffnen Sie es im Vollbildmodus.<br>
  Mit einem weiteren Klick, [ESC] oder [F11] kehren Sie zur klassischen Ansicht zurück.
</p>

</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:JS-Fullscreen-2.html&oldid=80585“