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

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

サイトのキャプチャ

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() {
    // フルスクリーン表示から出る時の処理
}

top of page

©2017 coliss