├── cover.jquery.json ├── example.html ├── jquery.cover.css ├── jquery.cover.js ├── myBackground.jpg ├── myBackground1280.jpg ├── myBackground1366.jpg └── readme.markdown /cover.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cover", 3 | "title": "jQuery Cover", 4 | "description": "CSS3 background-size:cover behavior cross browser compatible", 5 | "keywords": [ 6 | "background", 7 | "image", 8 | "css3", 9 | "background-size", 10 | "cover", 11 | "fullscreen" 12 | ], 13 | "version": "1.0.0", 14 | "author": { 15 | "name": "Philipp Adrian", 16 | "url": "http://www.philippadrian.com" 17 | }, 18 | 19 | "licenses": [ 20 | { 21 | "type": "MIT", 22 | "url": "http://opensource.org/licenses/MIT" 23 | } 24 | ], 25 | "bugs": "https://github.com/greenish/jquery-cover/issues", 26 | "homepage": "https://github.com/greenish/jquery-cover", 27 | "docs": "https://github.com/greenish/jquery-cover", 28 | "download": "https://github.com/greenish/jquery-cover", 29 | "dependencies": { 30 | "jquery": ">=1.5" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | jQuery Cover Plugin Example 6 | 7 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /jquery.cover.css: -------------------------------------------------------------------------------- 1 | .greenishCover { 2 | position:absolute; 3 | height:100%; 4 | width:100%; 5 | overflow:hidden; 6 | } 7 | /* HEIGHT 100%*/ 8 | .height.greenishCover div { 9 | position:relative; 10 | height:100%; 11 | width:10100%; 12 | left:-5000%; 13 | text-align:center; 14 | 15 | } 16 | .height.greenishCover img { 17 | display:inline; 18 | height:100%; 19 | margin-top:0 !important; 20 | } 21 | .height.left.greenishCover div { 22 | position:absolute; 23 | left:0px; 24 | text-align:left; 25 | } 26 | .height.right.greenishCover div { 27 | position:absolute; 28 | right:0px; 29 | left:auto; 30 | text-align:right; 31 | } 32 | /* WIDTH 100%*/ 33 | .width.greenishCover div { 34 | position:relative; 35 | width:100%; 36 | top:50%; 37 | } 38 | .width.greenishCover img { 39 | display:block; 40 | width:100%; 41 | } 42 | .width.top.greenishCover div { 43 | position:absolute; 44 | top:0px; 45 | } 46 | .width.top.greenishCover img { 47 | margin-top:0px !important; 48 | } 49 | .width.bottom.greenishCover div { 50 | position:absolute; 51 | bottom:0px; 52 | } 53 | .width.bottom.greenishCover img { 54 | margin-top:0px !important; 55 | position:absolute; 56 | bottom:0px; 57 | } -------------------------------------------------------------------------------- /jquery.cover.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * jQuery Cover plugin - v1.0.0 (https://github.com/greenish/jquery-cover) 3 | * 4 | * Copyright (c) 2011 Philipp Adrian (www.philippadrian.com) 5 | * 6 | * The MIT Licence (http://opensource.org/licenses/MIT) 7 | * 8 | * Permission is hereby granted, free of charge, to any person obtaining a copy 9 | * of this software and associated documentation files (the "Software"), to deal 10 | * in the Software without restriction, including without limitation the rights 11 | * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 12 | * copies of the Software, and to permit persons to whom the Software is 13 | * furnished to do so, subject to the following conditions: 14 | 15 | * The above copyright notice and this permission notice shall be included in 16 | * all copies or substantial portions of the Software. 17 | 18 | * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 19 | * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 20 | * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 21 | * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 22 | * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 23 | * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 24 | * THE SOFTWARE. 25 | */ 26 | 27 | (function($) { 28 | //////////////////////////////////////////////////////////////////////////////// 29 | var cover=$.fn.cover = function (method){ 30 | var call, args; 31 | if(typeof(method) === 'object' || !method) { 32 | args=arguments; 33 | call="_init"; 34 | } 35 | else if(cover[method]) { 36 | args=Array.prototype.slice.call(arguments,1); 37 | call=method; 38 | } 39 | else throw "Error: The method \""+method+"\" doesn't exist in jQuery Cover"; 40 | 41 | return $(this).each(function(){ 42 | // Make sure to select the image (and not a wrapper) 43 | var img=$(this).is("img") ? $(this) : $("img", this), 44 | data = img.data("data"); 45 | 46 | // IF already initialized -> update options. 47 | if(call == "_init" && data) { 48 | cover._opts(data, method, true); 49 | return; 50 | } 51 | data = data || { 52 | self:$(this), 53 | callbacks : [] 54 | }; 55 | 56 | if(call=="_init") { 57 | data.opts=method=="_init"?Array.prototype.slice.call(arguments,1):method; 58 | args=[data]; 59 | } 60 | else args=[data].concat(args); 61 | img.data("data", data); 62 | if(call=="_triggerCallback") return cover[call].apply(img, args); 63 | else try { 64 | cover[call].apply(img, args); 65 | } 66 | catch(err){ 67 | if(err!="callbackReturnedFalse") throw err; 68 | } 69 | }); 70 | }; 71 | $.extend(cover, { 72 | interval:false, 73 | //////////////////////////////////////////////////////////////////////////////// 74 | _init : function (data) { 75 | 76 | // Extends defaults into opts. 77 | var opts=cover._opts(data, data.opts, true); 78 | data.img = new Image(); 79 | 80 | // binding callbacks to make them available. 81 | for(var callbacks in opts.callbacks) cover.bindCallback(data,callbacks,opts.callbacks[callbacks]); 82 | 83 | //if currentSrc is undefined (old browsers), use the src attribute 84 | if ( typeof data.self.prop("currentSrc") === "undefined" ) data.img.src = data.self.attr("src"); 85 | else data.img.src = data.self.prop("currentSrc") ;//modern browser : use loaded image 86 | 87 | //console.log(data.img.src ); 88 | 89 | data.self.wrap($("
")); 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 | --------------------------------------------------------------------------------