Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery Fullscreenr
/**
* Fullscreenr - lightweight full screen background jquery plugin
* By Jan Schneiders
* www.nanotux.com
*
* Modifications by Chris Van Patten
* http://www.vanpattenmedia.com
* Version 1.5
**/
(function($){
$.fn.fullscreenr = function(options) {
var defaults = { width: 1280, height: 1024 };
var options = $.extend({}, defaults, options);
return this.each(function () {
$(this).fullscreenrResizer(options);
})
}
$.fn.fullscreenrResizer = function(options) {
// Set bg size
var ratio = options.height / options.width;
// Get browser window size
var browserwidth = $(window).width() + 80;
var browserheight = $(window).height();
// Scale the image
if ((browserheight/browserwidth) > ratio){
$(this).height(browserheight);
$(this).width(browserheight / ratio);
} else {
$(this).width(browserwidth);
$(this).height(browserwidth * ratio);
}
// Center the image
// $(this).css('left', (browserwidth - $(this).width())/2);
// $(this).css('top', (browserheight - $(this).height())/2);
return this;
}
})( jQuery );
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>jQuery Fullscreenr Sample</title>
<script type="text/javascript" src="jquery.fullscreenr.js"></script>
<script type="text/javascript">
$('#imageid').fullscreenr({width: 1229, height: 768});
</script>
</head>
<body>
<header>
<h1>jQuery Fullscreenr Sample</h1>
</header>
<section>
<img src="images/image.jpg" alt="Just a test" id="imageid">
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment