それマグで！

知識はカップより、マグでゆっくり頂きます。　takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。
トップ > 画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？

画像を拡大全画面表示するのに、まだLightBoxとか言ってんの？

フルスクリーン・モード使えよ。楽だぞ

昨今のブラウザにはフルスクリーンモードが搭載されていて、それを使うと、コピペレベルで画像を拡大表示が出来る

画像をフルスクリーンにお手軽に作るHTMLの例

<div id='img01' onclick="this.webkitRequestFullScreen();"  >
<img src='http://cdn-ak.f.st-hatena.com/images/fotolife/t/takuya_1st/20141129/20141129034938.jpg' />
</div>
<button onclick="img01.webkitRequestFullScreen();">フルスクリーンで表示</button>

#img01:-webkit-full-screen {
    width: 80%;
    background-color: rgba(255,0,0,0.1);
    
}
#img01:-webkit-full-screen img {
    display: block;
    margin: 10% auto;
    cursor: pointer;
}
#img01 img {
  max-width: 50%;
    cursor: pointer;
}

実例はコレ

フルスクリーンは結構便利。

フルスクリーンって結構便利なんですよね。これって、色々なところで使われてて、よくある例だと「動画」です。動画を全画面再生したいときに使いますね。

ブラウザの実装的には、これは任意の要素をフルスクリーンに表示するってことです。

さらにいえば、要素の高さ・幅をウインドウのスクリーンサイズに合わせるってこと。全画面だからって大したことをしていない。

フルスクリーンモードと同等のJavascriptを書くとこうなる。

// フルスクリーンモードとはscreen に揃えること
div = document.querySelector("#my_element")
div.style.width = window.screen.width
div.style.height = window.screen.height

//これはそれっぽく見せるおまじない。
//div.style.position = "fixed"
//div.style.top = "0px"
//div.style.left = "0px"
//div.style.zIndex = "100"
//div.style.overflow = "hidden"
//img = document.querySelector("#my_element img")
//img.style.maxWidth="50%"

ブラウザがやってることはだいたいこんなかんじだった。

JSで書くより、断然フルスクリーンモード。CSSで完全に制御できる。

制御が楽

全画面にしたい要素に onclick かくだけ。すげー楽ちん。覚えるのも楽ちん

<element onclick="this.webkitRequestFullScreen();

CSSの擬似セレクタが有効になる。

*:-webkit-full-screen  {
    width:100%;
    height:100%;
}

擬似要素セレクタが使えるのがわかりやすくていい。クラス名の汚染とかdata属性とか考えなくていい

どんな要素でもフルスクリーンにできる

要素を指定してフルスクリーンにするので、対象の要素はなんでもいい。

LigithBoxに動画埋められますか？フラッシュは？とかそういうこと考える前に、パパっと実装しよう。

JS探してくるより絶対早いから！

2014-11-29 追記 どんな要素でもですよ。

コメント見たら、モーダルダイアログが！とか言ってんの？もしかして、画像や動画しか表示できないと思ってない？全画面って立派なモーダルダイアログでも作れると思うんですけど、ダメなんですか？

入力１
入力２
入力３

スクロール量とか考えなくていい

CSSやページのデザインの都合上マージンとか、上書きとか細かいことで、既存のJSが合わなくなることあるよね。

数ピクセルずれたり、スクリーンサイズを気にしたり、スクロール時に画像表示がおかしくなったり、誰かがCSS上書きして崩れてたり。

小さなズレ気にしなくていいから！

フルスクリーン用にリセットCSSを書いちゃっても他には影響しない。

fullscreen起動の注意点

ユーザーのアクションでしか動作しない。コンソールからは起動できない。ページロードでイキナリフルスクリーンとか絶望させるいたずらも出来ないっす。

jquery のバージョン地獄

lightbox 系のためにjquery の違うバージョンをガンガンとHTMLに埋め込むのやめてください。

参考資料

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

2014-11-29 追記

ベンダプレフィックスがあると低級なの？？

mdn

煽られたので、煽り返しておきますね。MDNを資料で上げてるんだから、MDNのサポートにベンダプレフィックスなしで動作しないことくらい書いてあるの読めるよね？とりあえず自分の環境(OSX yosemite+Opera/chorme）で動いたので書きました。

2014-11-29 追記全画面表示の実装はブラウザ依存

ちなみに、Chromeだと全画面表示だけど、OSX Operaなら最大化でプレゼンテーションモードなんだよ。

全画面でPC画面占拠するのはChromeの実装が悪いと思います。

Opera使えOpera