jquery.fullscreenBackground.js
2.33 KB
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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/*
Fullscreen background is a small jQuery plugin that allows you to create fullscreen background.
Author: Gaya Kessler
Date: 04-25-2012
URL: http://www.gayadesign.com
*/
(function ($) {
var parentElement = "";
var optionsArr = {
selector: "img",
fillOnResize: true,
defaultCss: true
};
$.fn.fullscreenBackground = function (options) {
if(options) {
$.extend(optionsArr, options );
}
this.each(function () {
parentElement = this;
if (optionsArr.defaultCss == true) {
$("html,body").css({
width: "100%",
height: "100%"
});
$(parentElement).css({
height: "100%",
width: "100%",
overflow: "hidden",
position: "fixed",
top: "0px",
left: "0px",
zIndex: -999
});
}
if (optionsArr.fillOnResize == true) {
$(window).resize(function () {
fillBg(optionsArr.selector, parentElement);
});
}
fillBg(optionsArr.selector, parentElement);
});
};
function fillBg(selector, parentobj) {
var windowHeight = $(window).height();
var windowWidth = $(window).width();
$(selector, parentobj).each(function () {
var imgHeight = $(this).attr("height");
var imgWidth = $(this).attr("width");
var newWidth = windowWidth;
var newHeight = (windowWidth / imgWidth) * imgHeight;
var topMargin = ((newHeight - windowHeight) / 2) * -1;
var leftMargin = 0;
if (newHeight < windowHeight) {
var newWidth = (windowHeight / imgHeight) * imgWidth;
var newHeight = windowHeight;
var topMargin = 0;
var leftMargin = ((newWidth - windowWidth) / 2) * -1;
}
$(this).css({
height: newHeight + "px",
width: newWidth + "px",
marginLeft: leftMargin + "px",
marginTop: topMargin + "px",
display: "block"
});
});
}
})(jQuery);