ブラウザーをフルスクリーン(全画面)表示に「Fullscreen」

ブラウザーをフルスクリーン(全画面)表示にするプラグイン「Fullscreen」を紹介します。

jQueryプラグイン「Fullscreen」

このプラグインを使えば、クリックなどのユーザーアクションでブラウザーをフルスクリーンにすることができます。

対応しているブラウザーは以下の通りです。

  • Firefox 10+
  • Chrome 15+
  • Safari 5.1+
  • Opera 12.1+
  • Internet Explorer 11
スポンサーリンク

それではデモページをご覧ください。

「Fullscreen」のデモ

デモのソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Fullscreen のデモでーす。">
<title>Fullscreen - jQuery Plugin Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.fullscreen.min.js"></script>
<style>
#fullscreen{
  border: 1px solid blue;
  padding: 20px;
}
</style>
</head>
<body>
<p><a href="http://webkaru.net/jquery-plugin/fullscreen/">「jQueryプラグインまとめ」に戻る</a></p>

<h1>Fullscreen のデモ。</h1>

<div id="fullscreen">
<h2>この部分がフルスクリーンになります。</h2>
<p>
  <a href="#" class="requestfullscreen">クリックするとフルスクリーン!</a>
  <a href="#" class="exitfullscreen" style="display: none">クリックすると元に戻る!</a>
</p>
</div>

</div>

<script>
$(function() {
  $('#fullscreen .requestfullscreen').click(function() {
    $('#fullscreen').fullscreen();
    return false;
  });
  $('#fullscreen .exitfullscreen').click(function() {
    $.fullscreen.exit();
    return false;
  });
  $(document).bind('fscreenchange', function(e, state, elem) {
    if ($.fullscreen.isFullScreen()) {
      $('#fullscreen .requestfullscreen').hide();
      $('#fullscreen .exitfullscreen').show();
    } else {
      $('#fullscreen .requestfullscreen').show();
      $('#fullscreen .exitfullscreen').hide();
    }
  });
});
</script>
</body>
</html>
スポンサーリンク