jQuery Plugin For Responsive Fullscreen Images - Fullscreener
File Size: | 36.2 KB |
---|---|
Views Total: | 2545 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Fullscreener is a simple jQuery plugin that automatically resizes and cuts off your image to adapt its parent container's size. You can also specify a position value which will override values found by the actual image positioning.
How to use it:
1. Insert an images in a container. Please note that the image should have width/height attributes.
<div class="bg"> <img src="image.jpg" width="1920" height="1200" alt="" /> </div>
2. Load the jQuery javascript library and jQuery fullscreener plugin in the page.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="jquery.fullscreener.js"></script>
3. The required CSS.
.fsr-container { overflow: hidden; background-position: center center; background-repeat: no-repeat; background-size: cover; } .fsr-element { position: absolute; } .fsr-hidden { display: none; }
4. Call the plugin and customize the position.
<script> (function($){ $(document).ready(function(){ $('.bg img').fullscreener({ useCSS: false, // use CSS3 or not container: 'parent', position: { x: 'center', y: 'center' }, throttleTimeout: 100 }); }); })(jQuery); </script>
Change log:
v1.0.1 (2014-04-15)
- Fixed an initialization bug.
This awesome jQuery plugin is developed by vvasilev-. For more Advanced Usages, please check the demo page or visit the official website.