Easy Elements Fullscreen Plugin with jQuery

Easy Elements Fullscreen Plugin with jQuery
File Size: 49 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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)

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.