13-full-screen.html


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>The Five Planets - fullscreen</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style>
        body {
            text-align:center;
        }
    
        .demo-img {
            height:128px;
            width:128px;
        }
        .demo-img:fullscreen {
            padding:42px;
            background-color: blue;
            border:2px solid #f00;
        }

        .demo-img:-webkit-full-screen {
            padding:42px;
            background-color: blue;
            border:2px solid #f00;
        }

        .demo-img:-moz-full-screen {
            padding:42px;
            background-color: blue;
            border:2px solid #f00;
        }
        
        .demo-img:-ms-fullscreen  {
            padding:42px;
            background-color: blue;
            border:2px solid #f00;
        }
                        
    </style>    
    <script>
    function fullscreenEnabled() {
      return document.fullscreenEnabled || 
            document.webkitFullscreenEnabled ||
            document.mozFullScreenEnabled ||
            document.msFullscreenEnabled;
    };
    
    function fullscreen(element) {
      if (!element) element=document.documentElement; 
      element.requestFullscreen = element.requestFullscreen ||
            element.mozRequestFullScreen ||
            element.webkitRequestFullscreen ||
            element.msRequestFullscreen;
      element.requestFullscreen();
    }
    
    function exitFullscreen() {
      document.exitFullscreen = document.exitFullscreen ||
            document.mozCancelFullScreen ||
            document.webkitExitFullscreen ||
            document.msExitFullscreen;
      document.exitFullscreen();
    }
    
    function isInFullscreenMode() {
        return document.fullscreenElement ||
            document.webkitFullscreenElement ||
            document.mozFullScreenElement ||
            document.msFullscreenElement;
    }
    
    function toggleFullscreen() {
        if (isInFullscreenMode()) {
            exitFullscreen();
        } else {
            fullscreen();
        }
    }
    
    function handlerScreenChange () {
        if (isInFullscreenMode()) {
            document.getElementById("status").innerHTML="Modo pantalla completa activado";
        } else {
            document.getElementById("status").innerHTML="Modo pantalla completa desactivado";
        }
    }

    function init () {
        if (fullscreenEnabled()) {
            document.getElementById("supported").innerHTML="El API HTML5 Fullscreen está disponible";
            document.getElementById("supported").style.color="green"
            handlerScreenChange ();
         } else {
            document.getElementById("supported").innerHTML="El API HTML5 Fullscreen no está disponible";
            document.getElementById("supported").style.color="red"
        }
    }
    
    
    document.addEventListener("fullscreenchange", handlerScreenChange);
    document.addEventListener("webkitfullscreenchange", handlerScreenChange);
    document.addEventListener("mozfullscreenchange", handlerScreenChange);
    document.addEventListener("MSFullscreenChange", handlerScreenChange);
    window.addEventListener("load", init);


    </script>
</head>
<body>

<p>Api </p>
<button id="request" onclick="fullscreen()">Solicitar pantalla completa</button>
<button id="exit" onclick="exitFullscreen()">Cancelar pantalla completa</button>
<button id="toggle" onclick="toggleFullscreen()">Intercambiar modo</button>
<br><br>

<div id="supported"></div>
<div id="status"></div>

<p>Pulsa sobre una de las imagenes para verla a pantalla completa</p>
<center>
<table>
<tr>
<td><img class="demo-img" src="..\data\graphics\portraits\male_magician.png" onclick="fullscreen(this)"></td>
<td><img class="demo-img" src="..\data\graphics\portraits\male_magician2.png" onclick="fullscreen(this)"></td>
<td><img class="demo-img" src="..\data\graphics\portraits\female_magician1.png" onclick="fullscreen(this)"></td>
<td><img class="demo-img" src="..\data\graphics\portraits\female_magician2.png" onclick="fullscreen(this)"></td>
</tr>
<tr>
<td><img class="demo-img" src="..\data\graphics\portraits\female_cat1.png" onclick="fullscreen(this)"></td>
<td><img class="demo-img" src="..\data\graphics\portraits\female_elf1.png" onclick="fullscreen(this)"></td>
<td><img class="demo-img" src="..\data\graphics\portraits\male_cat1.png" onclick="fullscreen(this)"></td>
<td><img class="demo-img" src="..\data\graphics\portraits\male_elf1.png" onclick="fullscreen(this)"></td>
</tr>
</table>
</center>
</body>
</html>