Vollbild-Modus im Browser

Nachfolgend eine komplettes Beispiel mit jQuery und der neuen Fullscreen-API ein HTML-Element im Vollbild-Modus anzuzeigen. Funktioniert nur in den neusten Browser von Safari, Firefox und Chrome und sieht auch nur im Firefox gut aus… aber hier gehts einfach nur um die Funktion.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script type="text/javascript" src="jquery.js"></script>
  <style>
    .white {
      font-family:verdana;
      margin-top:200px;
    }
    .white div
    {
      background-color:white;
      width:50%;
      margin:auto;
      -moz-border-radius: 5px;
      border-radius: 5px;
      -moz-box-shadow: 5px 5px grey;
      -webkit-box-shadow: 5px 5px grey;
      box-shadow: 5px 5px grey;
      padding:25px;
    }
    .hidden {
      display:none;
    }
  </style>
</head>
<body>
 
<div id="fullscreen-container">
  <div>
    <div>
      Here is your Fullscreen!
    </div>
  </div>
</div>
<p>
  <a href="#" id="fullscreen-link">Show me fullscreen container...</a>
</p>
<script type="text/javascript">
//<![CDATA[
(function($) {
  $.fn.extend({
    fullscreen:function(params) {
      var conf = {};
      $.extend(conf, params);
      return $(this).each(function() {
          var e=$(params);
          var element=e[0];
          $(this).click(function() {
              e.removeClass('hidden');
            if(element.requestFullScreen) {
              element.requestFullScreen();
              jQuery(document).bind("fullscreenchange", function() {
                if(!document.fullScreen) e.addClass('hidden')
              });
            }
            else if (element.mozRequestFullScreen) {
              element.mozRequestFullScreen();
              jQuery(document).bind("mozfullscreenchange", function() {
              if(!document.mozFullScreen) e.addClass('hidden')
            });
            }
            else if (element.webkitRequestFullScreen) { 
              element.webkitRequestFullScreen();
              jQuery(document).bind("webkitfullscreenchange", function() {
                  if(!document.webkitIsFullScreen) e.addClass('hidden')
              });
            }
          });
      });
    }
  });
})(jQuery);
 
jQuery('#fullscreen-link').fullscreen('#fullscreen-container');
 
//]]>
</script>
</body>
</html>

 

3 Gedanken zu “Vollbild-Modus im Browser

    • Im Prinzip läuft der Code oben korrekt. Einfach eine Datei erstellen, aktuelles JQuery herunterladen, fertig. Das mit den Demos ist keine schlechte Idee, muß dazu nur noch eine passende (und einfache) Möglichkeit finden, das einfach in WordPress einzubinden.

      • Gibt doch ne ganz einfache alternative :)
        Erstell dir unterhalb von WordPress einen Unterordner den du Demos nennst oder so :) (welcher dann auch von aussen erreichbar sein sollte, notfalls muss halt etwas .htaccess gefrickel betrieben werden). Dort packst du dir deine jQuery und CSS Struktur rein, und machs für jede Demo dann ne eigene HTML Unterseite.
        Hat den Vorteil, dass alles auch ohne WordPress im Nacken funktioniert und man auch so einfacher den Quellcode ansehen kann… noch einfacher wäre eine index.php und dann je nach gewählter demo (zb per GET Parameter übergeben: index.php?demo=vollbild) die jeweilige subpage zu laden (include(‚demo_vollbild.php‘))
        :) dann die jeweilige Seite einfach in deinen Tutorials verlinken und das Problem ist gelöst :D

Kommentar verfassen