-
Notifications
You must be signed in to change notification settings - Fork 2
/
jquery.backgrounder.js
64 lines (63 loc) · 2.25 KB
/
jquery.backgrounder.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
(function($) {
$.fn.backgrounder = function(options) {
var defaults = { element : 'body' };
var options = $.extend(defaults, options);
// Get the image we're using
var img = $(this).children('img').first();
// Get the image source
var src = $(img).attr('src');
// Hide the original element
$(this).hide();
// Make parent relative
w = options.element == 'body' ? $(window).width() : $(options.element).width();
h = options.element == 'body' ? $(window).height() : $(options.element).height();
// Create a new div
$('<div id="backgrounder-container"></div>')
.css({'position':'absolute','z-index':-100,'left':0,'top':0,'overflow':'hidden','width':w,'height':h})
.appendTo($(options.element))
// Create a new image
$('<img />')
.appendTo($('#backgrounder-container'))
.attr('src',src)
.css({'position':'absolute'})
.hide()
.load(function() {
resizeBackgrounder(this, options.element);
$(this).fadeIn();
})
// Resize handler
$(window).resize(function() {
var newW = options.element == 'body' ? $(window).width() : $(options.element).width();
var newH = options.element == 'body' ? $(window).height() : $(options.element).height();
$('#backgrounder-container').css({'width':newW,'height':newH});
resizeBackgrounder('#backgrounder-container img:first', options.element);
})
// Update function
function resizeBackgrounder(item, elem) {
console.log("Background resized ... ");
if (elem != 'body') {
w = $(elem).width();
h = $(elem).height();
} else {
w = $(window).width();
h = $(window).height();
}
console.log("Element Width: " + w);
console.log("Element Height: " + h);
var ow = $(item).width();
var oh = $(item).height();
console.log("Container Width: " + ow);
console.log("Container Height: " + oh);
if (ow / oh > w / h) { // image aspect ratio is wider than browser window
var scale = h / oh;
$(item).attr({'width':ow * scale,'height':oh * scale});
} else {
var scale = w / ow;
$(item).attr({'width':ow * scale,'height':oh * scale});
}
$(item).css({'left':-(($(item).width()-w)/2),'top':-(($(item).height()-h)/2)});
}
// Return
return this.each(function() { });
};
}) (jQuery);