[JS]ページ全体やコンテンツ（画像や動画）をフルスクリーンで表示するだけのシンプルなスクリプト -BigScreen

指定したエレメントをクリックすると、ページ全体をフルスクリーンで表示したり、画像や動画をフルスクリーンで表示するシンプルで超軽量（1KB）のスクリプトを紹介します。

BigScreen

• BigScreenの特徴
• BigScreenのデモ
• BigScreenの使い方

BigScreenの特徴

BigScreenはページ全体やコンテンツをフルスクリーンで表示するシンプルで軽量（minified:1KB）のスクリプトです。

対応ブラウザ

• Chrome 15+
• Firefox 10+
• Safari 5.1+

動画コンテンツの表示は下記もサポートします。

• Safari 5.0
• iOS 4.2+

BigScreenのデモ

デモはサイトのタイトル（BigScreen）のテキストをはじめ、画像や動画などをクリックすると、フルスクリーンで表示します。

BigScreenのデモ：ページ全体
タイトル（BigScreen）をクリックします。

BigScreenのデモ：画像
画像をクリックします。

BigScreenのデモ：動画
動画は右下のボタンをクリックします。

BigScreenの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="bigscreen.js"></script>

Step 2: JavaScript

まずは、フルスクリーンに表示する際にベースとなる記述です。

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.toggle();
    }
    else {
        // 非対応ブラウザ用の処理
    }
}, false);

エレメント（target）を指定して、それをクリックするとフルスクリーン表示にします。

var element = document.getElementById('target');

document.getElementById('button').addEventListener('click', function() {
    if (BigScreen.enabled) {
        BigScreen.request(element);
        // You could also use .toggle(element)
    }
    else {
        // 非対応ブラウザ用の処理
    }
}, false);

フルスクリーンの状態を検出します。

BigScreen.onenter = function() {
    // フルスクリーン表示に入る時の処理
}

BigScreen.onexit = function() {
    // フルスクリーン表示から出る時の処理
}