ブラウザーをフルスクリーン（全画面）表示に「Fullscreen」
当ページのリンクには広告が含まれています。
スポンサーリンク
ブラウザーをフルスクリーン（全画面）表示にするプラグイン「Fullscreen」を紹介します。
jQueryプラグイン「Fullscreen」
このプラグインを使えば、クリックなどのユーザーアクションでブラウザーをフルスクリーンにすることができます。
対応しているブラウザーは以下の通りです。
- Firefox 10+
- Chrome 15+
- Safari 5.1+
- Opera 12.1+
- Internet Explorer 11
スポンサーリンク
それではデモページをご覧ください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Fullscreen のデモでーす。">
<title>Fullscreen - jQuery Plugin Demo</title>
<script src="//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="https://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>
スポンサーリンク