1. INCLUDE JS FILE
<script src="https://cdnjs.cloudflare.com/ajax/libs/screenfull.js/5.1.0/screenfull.js"></script>
2. HTML
<img id="demo-img" src="https://sindresorhus.com/unicorn" width="500">
3. JAVASCRIPT
$('#demo-img').click(() => {
screenfull.toggle($('#demo-img')[0]);
});
4. API
.request(element, options?)
Make an element fullscreen.
Accepts a DOM element and FullscreenOptions.
The default element is <html>. If called with another element than the currently active, it will switch to that if it's a descendant.
If your page is inside an <iframe> you will need to add a allowfullscreen attribute (+ webkitallowfullscreen and mozallowfullscreen).
Keep in mind that the browser will only enter fullscreen when initiated by user events like click, touch, key.
Returns a promise that resolves after the element enters fullscreen.
.exit()
Brings you out of fullscreen.
Returns a promise that resolves after the element exits fullscreen.
.toggle(element, options?)
Requests fullscreen if not active, otherwise exits.
Accepts a DOM element and FullscreenOptions.
Returns a promise that resolves after the element enters/exits fullscreen.
.on(event, function)
Events: 'change' | 'error'
Add a listener for when the browser switches in and out of fullscreen or when there is an error.
.off(event, function)
Remove a previously registered event listener.
.onchange(function)
Alias for .on('change', function)
.onerror(function)
Alias for .on('error', function)
.isFullscreen
Returns a boolean whether fullscreen is active.
.element
Returns the element currently in fullscreen, otherwise undefined.
.isEnabled
Returns a boolean whether you are allowed to enter fullscreen. If your page is inside an <iframe> you will need to add a allowfullscreen attribute (+ webkitallowfullscreen and mozallowfullscreen).
.raw
Exposes the raw properties (prefixed if needed) used internally: requestFullscreen, exitFullscreen, fullscreenElement, fullscreenEnabled, fullscreenchange, fullscreenerror
JS Tutorial
