Iron Man Day 20 - screenfull.js

by Sheng Huang Huang

HTML

<script src="https://cdn.rawgit.com/sindresorhus/screenfull.js/gh-pages/dist/screenfull.min.js"></script>
<div>
  <h1 id="fullScreenSupport">
  </h1>
</div>
<div>
  <button id="fullScreen">
    全螢幕顯示
  </button>
  <button id="imageFullScreen">
    將圖片全螢幕顯示
  </button>
  <button id="cancelFullScreen">
    取消全螢幕
  </button>
</div>

<img id="image" src="http://placehold.it/500x300" />

JavaScript

$(document).ready(function(){
	$('#fullScreenSupport').html(
  	screenfull.enabled
    ? '瀏覽器支援全螢幕API'
    : '瀏覽器不支援全螢幕API');
});

$('#fullScreen').click(function() {
  if (screenfull.enabled) {
    screenfull.request();
  }
});

$('#imageFullScreen').click(function() {
  if (screenfull.enabled) {
    screenfull.request(document.getElementById('image'));
  }
});

$('#cancelFullScreen').click(function() {
  if (screenfull.enabled) {
    screenfull.exit();
  }
});