jQuery Plugin For Setting Responsive Fullscreen Size To Elements - toFullScreen.js

File Size: 198 KB
Views Total: 1236
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Setting Responsive Fullscreen Size To Elements - toFullScreen.js

toFullScreen.js is an extremely lightweight jQuery plugin which responsively renders an element full screen to make it as large as possible while preserving the original aspect ratio. Useful to auto resize images, iframes and Youtube/vimeo videos to fit the full screen.

Basic usage:

1. Include the jQuery toFullScreen.js plugin's script before the closing body tag of your HTML document, after you've included jQuery library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/toFullScreen.js"></script>

2. Make your element fullscreen with just one JS call.

$("#el").toFullScreen();

3. Set the minimum margins around the element (can be more due to preservation of the original ratio).

$("#el").toFullScreen({
  minMargin: 0
});

4. By default the element will occupy the max it can (minus the margins), with respect to it's original ratio. But it you prefer it to be only, let's say 90%, just set the coeff to 0.9.

$("#el").toFullScreen({
  coeff: .9
});

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