"));
90 | data.wrapper=data.self.parent().parent();
91 |
92 | if(opts.backgroundPosition) {
93 | if(opts.backgroundPosition.search(/top/i) >= 0) data.wrapper.addClass("top");
94 | else if(opts.backgroundPosition.search(/bottom/i) >= 0) data.wrapper.addClass("bottom");
95 | if(opts.backgroundPosition.search(/left/i) >= 0) data.wrapper.addClass("left");
96 | else if(opts.backgroundPosition.search(/right/i) >= 0) data.wrapper.addClass("right");
97 | }
98 |
99 | if(opts.loadHidden) data.self.css({visibility:"hidden"});
100 | data.self.cover("_triggerCallback","preLoading"); // #CALLBACK
101 | if(!cover.interval) cover.interval=setInterval(cover._loading, 100);
102 |
103 | data.opts.checkWindowResize && $(window)
104 | .unbind("resize.cover")
105 | .bind("resize.cover", function(){$(".greenishCover").cover("update")});
106 | },
107 | ////////////////////////////////////////////////////////////////////////////////
108 | update : function() {
109 | var that = $(this),
110 | img=that.is("img") ? that : that.find("img"),
111 | data = img.data("data"),
112 | wrapper = data.wrapper,
113 | current = wrapper.hasClass("height") ? "height":"width",
114 | newRatio = wrapper.height()/wrapper.width() >= data.ratio ? "height":"width";
115 |
116 | if(current !== newRatio) {
117 | wrapper.addClass(newRatio).removeClass(current);
118 | img.cover("_triggerCallback","ratioSwitch"); // #CALLBACK
119 | }
120 | },
121 | ////////////////////////////////////////////////////////////////////////////////
122 | _loading : function () {
123 | cover.complete=true;
124 | $(".greenishCover").each(function (){
125 | var data = $("img", this).data("data"),
126 | image= data.img;
127 | if(!image || !image.complete || image.height <= 0 || image.width <= 0) {
128 | cover.complete=false;
129 | return;
130 | }
131 | data.ratio=image.height/image.width;
132 | var marginTop=50/image.width*image.height; // Based on the fact that (marginTop 100% == width).
133 | data.self.css({"marginTop":-marginTop+"%"});
134 | if(data.opts.loadHidden) data.self.css({visibility:"visible"});
135 | data.self.cover("_triggerCallback","postLoading"); // #CALLBACK
136 | data.wrapper.cover("update");
137 | });
138 | if(cover.complete) {
139 | clearInterval(cover.interval);
140 | cover.interval=false;
141 | }
142 | },
143 | ////////////////////////////////////////////////////////////////////////////////
144 | bindCallback : function (data, callback, func) {
145 | func=typeof(func)=="function"?[func]:func;
146 | data.callbacks[callback]=data.callbacks[callback]||[];
147 | for(var key in func) data.callbacks[callback].push(func[key]);
148 | },
149 | ////////////////////////////////////////////////////////////////////////////////
150 | _triggerCallback : function (data, callback, param) {
151 | if(!data.callbacks[callback] || data.callbacks[callback].length <= 0) return param;
152 | for(var key in data.callbacks[callback])
153 | if((param=data.callbacks[callback][key].apply(this, [data,param])) !== false) continue;
154 | else throw "callbackReturnedFalse";
155 | return param;
156 | },
157 | ////////////////////////////////////////////////////////////////////////////////
158 | _opts : function (data, opts, save) {
159 | opts=$.extend(true,{},this.defaults, data.opts||{}, opts||{});
160 | if(save) data.opts=opts;
161 | return opts;
162 | },
163 | ////////////////////////////////////////////////////////////////////////////////
164 | defaults : {
165 | backgroundPosition:false,
166 | callbacks: {},
167 | checkWindowResize:true,
168 | loadHidden : true
169 | }
170 | });
171 | })(jQuery);
172 |
173 |
174 |
--------------------------------------------------------------------------------
/myBackground.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ph101pp/jquery-cover/856cc3173acd770ad687b19f6e8358c2a6cc5b66/myBackground.jpg
--------------------------------------------------------------------------------
/myBackground1280.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ph101pp/jquery-cover/856cc3173acd770ad687b19f6e8358c2a6cc5b66/myBackground1280.jpg
--------------------------------------------------------------------------------
/myBackground1366.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/ph101pp/jquery-cover/856cc3173acd770ad687b19f6e8358c2a6cc5b66/myBackground1366.jpg
--------------------------------------------------------------------------------
/readme.markdown:
--------------------------------------------------------------------------------
1 | #jQuery Cover plugin
2 |
3 | This plugin mimics the CSS3 `background-size:cover;` behavior and therefore makes it available in all browsers.
4 |
5 | Compatible with IE 7.0+, Firefox 3+, Safari 3.1+, Opera 9.6+ and Google Chrome.
6 |
7 | [Example](http://greenish.github.io/jquery-cover)
8 |
9 | #Documentation
10 |
11 | 1. General
12 | ----------------
13 |
14 | To start off, get the newest version of the jQuery Cover plugin from Github and move it into your project folder.
15 |
16 | Include the files __(JS AND CSS)__ into your HTML and you're ready to go:
17 |
18 | ``` javascript
19 | jQuery(function(){
20 | $("img.myBackgroundImage").cover();
21 | });
22 | ```
23 |
24 | So the code above takes an image:
25 |
26 | ``` html
27 |
28 |

29 |
30 | ```
31 |
32 | And makes it cover its parent container element completely.
33 |
34 | The new markup will look like this:
35 |
36 | ``` html
37 |
38 |
39 |
40 |

41 |
42 |
43 |
44 | ```
45 |
46 | 2. Methods
47 | ----------------
48 |
49 | ``` javascript
50 | $(".myBackgroundImage").cover([Object options]);
51 | ```
52 |
53 | > ####Initialize / Update Options
54 | >
55 | > Initialize the jQuery Cover plugin on a set of Images.
56 | >
57 | > Optional you can pass an object with options (see below) to the function.
58 | >
59 | > Also you can change options with this at any time after initialisation.
60 |
61 | -------------------------
62 |
63 | ``` javascript
64 | $(".myBackgroundImage").cover("update");
65 | ```
66 |
67 | > #### Update
68 | >
69 | > Tests the aspect ratio of the container against the aspect ratio of the image and updates the display of the image if necessary.
70 |
71 | -------------------------
72 |
73 | ``` javascript
74 | $(".myBackgroundImage").cover("bindCallback", Function);
75 | ```
76 |
77 | > #### Bind a Callback/Event
78 | >
79 | > Registers or binds a callback function to a certain event. (see below).
80 |
81 |
82 | 3. Options
83 | ----------------
84 |
85 | Options can be set or changed by passing an object to the cover() function. This can be done on initialisation or afterwards to change any value.
86 |
87 | Here are all the possibile options (set to their __default values__):
88 |
89 | ``` javascript
90 | $(".myBackgroundImage").cover({
91 | backgroundPosition:"center",
92 | checkWindowResize:true,
93 | loadHidden:true,
94 | callbacks: {}
95 | });
96 | ```
97 |
98 | ###Option Details
99 |
100 | ``` javascript
101 | backgroundPosition: String Default: "center"
102 | ```
103 |
104 | > Works similar to the CSS property ``background-position``.
105 | >
106 | > Can be any of the following: __"center"__, __"top"__, __"right"__, __"bottom"__, __"left"__
107 | >
108 | > And also a combination of two like: __"top left"__ or __"bottom left"__.
109 |
110 | -------------------------
111 |
112 | ``` javascript
113 | checkWindowResize: boolean Default: true
114 | ```
115 |
116 | > If true the plugin will automatically call ``$(".myBackgroundImage").cover("update");`` on window resize.
117 |
118 | -------------------------
119 |
120 | ``` javascript
121 | loadHidden: boolean Default: true
122 | ```
123 |
124 | > If true the image is hidden until its displayed properly. This prevents some jittering.
125 |
126 | -------------------------
127 |
128 | ``` javascript
129 | callbacks: { Default: {}
130 | "callbackName": Function(callback function)
131 | Object (multiple callback functions)
132 | Array (multiple callback functions)
133 | }
134 | ```
135 |
136 |
137 | > Allows to register callback functions during initialisation.
138 | >
139 | > To learn more about the available callbacks look at the Callbacks/Events chapter below.
140 |
141 | -------------------------
142 |
143 | 4. Callbacks/Events
144 | ----------------
145 |
146 | During the runtime of the plugin a bunch of callbacks are fired.
147 |
148 | Callbacks can be registered by adding the functions to the options object or by calling the "bindCallback" method.
149 |
150 | Every callback function receives the _data_ object as first parameter while the following parameters can change.
151 |
152 | By returning __false__ in the callback the pluging cancels the current event and stopps its action.
153 |
154 | This is a list of all the callbacks that are available at the moment (to find them in the code search for _#CALLBACK_):
155 |
156 | ``` javascript
157 | "preLoading" function(data) Context: $(".myBackgroundImage")
158 | ```
159 |
160 | > Called on initialisation before the image is loaded.
161 |
162 | -------------------------
163 |
164 | ``` javascript
165 | "postLoading" function(data) Context: $(".myBackgroundImage")
166 | ```
167 |
168 | > Called on initialisation after the image is loaded.
169 |
170 | -------------------------
171 |
172 | ``` javascript
173 | "ratioSwitch" function(data) Context: $(".myBackgroundImage")
174 | ```
175 |
176 | > Called when the display style of the image changes to either be ``width:100%`` or ``height:100%``.
177 |
178 |
179 | ###Add New Callback
180 |
181 | If you need a new callback that is missing, feel free to add it in the code!
182 | Just put the following at the place you need the call:
183 |
184 | ``` javascript
185 | [context].cover("_triggerCallback","myCallbackName" [,parameterOne, parameterTwo, ...]);
186 | ```
187 |
188 | Notice that the new callback will come with all the features of the default ones:
189 | * The _data_ object will always be passed as the first parameter. (And you can add as many additional parameters as you wish.)
190 | * return __false__ will stop the further execution of the acutal event.
191 |
192 | __When you added a new callback, tell me about it! So I can consider adding it to the default callbacks.__
193 |
--------------------------------------------------------------------------------