Easy Elements Fullscreen Plugin with jQuery

A jQuery plugin that allows you to open any element in fullscreen mode in all modern browsers like Firefox, Chrome, Safari and Opera. For those older browsers don't support this feature,  the element will be just stretched to fill the screen without switching to fullscreen.

You might also like:

• Simple Fullscreen Image Slideshow Plugin - fullsizable
• Stunning Fullscreen Photo Wall Gallery
• jQuery Fullscreen Background Slideshow - MaxImage
• Fullscreen Background Slideshow with Audio
• Animated Fullscreen Background Image Slideshow
• Fullscreen Background Video Plugin
• Fullscreen Pageflip Layout with BookBlock
• Fullscreen Image Gallery with Thumbnail Preview
• Supersized Fullscreen Slideshow Plugin

How to use it:

1. Include jQuery library and fullscreen.js

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fullscreen-0.3.2.min.js"></script>

2. Markup

<div id="fullscreen">
<h2>Example</h2>
<p>Your browser <span id="support">doesn't support</span> FullScreen API.</p>
<p>This block is <span id="state">not</span> in fullscreen mode. <a href="#" class="requestfullscreen">Click to open it in fullscreen</a><a href="#" class="exitfullscreen" style="display: none">Click to exit fullscreen</a>.</p>
</div>

3. Call the plugin

$(function() {
	// check native support
	$('#support').text($.fullscreen.isNativelySupported() ? 'supports' : 'doesn\'t support');
	// open in fullscreen
	$('#fullscreen .requestfullscreen').click(function() {
		$('#fullscreen').fullscreen();
		return false;
	});
	// exit fullscreen
	$('#fullscreen .exitfullscreen').click(function() {
		$.fullscreen.exit();
		return false;
	});
	// document's event
	$(document).bind('fscreenchange', function(e, state, elem) {
		// if we currently in fullscreen mode
		if ($.fullscreen.isFullScreen()) {
			$('#fullscreen .requestfullscreen').hide();
			$('#fullscreen .exitfullscreen').show();
		} else {
			$('#fullscreen .requestfullscreen').show();
			$('#fullscreen .exitfullscreen').hide();
		}
		$('#state').text($.fullscreen.isFullScreen() ? '' : 'not');
	});
});

Change Logs:

v0.6.0 (2016-08-25)

• Fixed ANDROID_CHROME_VERSION is undefined

v0.5.1 (2015-06-16)

• natively support android chrome starting from version 38
• switch back to position: fixed

v0.5.0 (2014-08-02)

• update.

v0.4.2 (2014-08-02)

• update.

v0.4.1 (2013-12-12)

• support for IE fullscreen events naming

v0.3.4 (2013-04-18)

• minor bugs fixed

v0.3.3 (2013-03-24)

• force redraw after exit fullscreen (fixes bug in IE7 with content disapearing

---

This awesome jQuery plugin is developed by private-face. For more Advanced Usages, please check the demo page or visit the official website.