jQuery Plugin For Responsive Fullscreen Images - Fullscreener

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.