Backstretch can now be applied to multiple DIVs #93

Closed
wants to merge 2 commits into
from
Jump to file or symbol
Failed to load files and symbols.
+65 −37
Split
View
@@ -1,59 +1,75 @@
/*
* jQuery Backstretch
- * Version 1.2.5
+ * Version 1.3
* http://srobbin.com/jquery-plugins/jquery-backstretch/
+ * http://github.com/colorjar/jquery-backstretch/
*
* Add a dynamically-resized background image to the page
*
+ * This is a fork of SRobbin's original 1.2.2 script.
+ * It includes additional options and the ability to apply
+ * the backstretch to multiple DIV containers, instead of
+ * only the BODY of a page.
+ *
+ * ColorJar Author
+ * Tim Novinger | http://github.com/timnovinger
+ *
* Copyright (c) 2011 Scott Robbin (srobbin.com)
* Dual licensed under the MIT and GPL licenses.
*/
-;(function($) {
+(function($) {
$.backstretch = function(src, options, callback) {
var defaultSettings = {
- centeredX: true, // Should we center the image on the X axis?
- centeredY: true, // Should we center the image on the Y axis?
- speed: 0 // fadeIn speed for background after image loads (e.g. "fast" or 500)
+ target: 'body', // Apply on BODY by default or on a passed in element ID
+ injectUsingPrepend: false, // Append by default or prepend by passing in TRUE
+ positionType: 'fixed', // Normal CSS position types of relative, fixed, absolute
+ centeredX: true, // Should we center the image on the X axis?
+ centeredY: true, // Should we center the image on the Y axis?
+ zIndex: '-999999', // Option to pass in z-index value, if backstretch is being applied to a normal DIV this can be useful
+ speed: 0 // fadeIn speed for background after image loads (e.g. "fast" or 500)
},
- container = $("#backstretch"),
- settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
+ container = $(".backstretch"),
+ settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
existingSettings = container.data('settings'),
- rootElement = ("onorientationchange" in window) ? $(document) : $(window), // hack to acccount for iOS position:fixed shortcomings
imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS;
-
+
// Extend the settings with those the user has provided
if(options && typeof options == "object") $.extend(settings, options);
-
- // Just in case the user passed in a function without options
- if(options && typeof options == "function") callback = options;
-
+
+ if (settings.target == 'body'){
+ // hack to acccount for iOS position:fixed shortcomings
+ rootElement = ("onorientationchange" in window) ? $(document) : $(window);
+ } else {
+ rootElement = $(settings.target);
+ }
+
// Initialize
$(document).ready(_init);
-
+
// For chaining
return this;
-
+
function _init() {
- // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
+ // Inject image, wrapped in a DIV, with some positioning and zIndex voodoo
if(src) {
var img;
-
+
// If this is the first time that backstretch is being called
if(container.length == 0) {
- container = $("<div />").attr("id", "backstretch")
- .css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "100%", width: "100%"});
+ container = $("<div />").attr("class", "backstretch")
+ .css({left: 0, top: 0, position: settings.positionType, overflow: "hidden", zIndex: settings.zIndex, margin: 0, padding: 0, height: "100%", width: "100%"});
} else {
// Prepare to delete any old images
container.find("img").addClass("deleteable");
}
-
- img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999})
- .bind("load", function(e) {
+
+ img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: settings.zIndex})
+ .bind("load", function(e) {
var self = $(this),
imgWidth, imgHeight;
-
+
self.css({width: "auto", height: "auto"});
imgWidth = this.width || $(e.target).width();
imgHeight = this.height || $(e.target).height();
@@ -67,30 +83,33 @@
if(typeof callback == "function") callback();
});
});
-
+
})
.appendTo(container);
-
+
// Append the container to the body, if it's not already there
- if($("body #backstretch").length == 0) {
- $("body").append(container);
+ var $target = $(settings.target),
+ injection_type = settings.injectUsingPrepend ? 'prepend' : 'append';
+
+ if($target.is('*') && $target.find('.backstretch').length == 0) {
+ $target[injection_type](container);
}
-
+
// Attach the settings
container.data("settings", settings);
-
+
img.attr("src", src); // Hack for IE img onload event
// Adjust the background size when the window is resized or orientation has changed (iOS)
$(window).resize(_adjustBG);
}
}
-
+
function _adjustBG(fn) {
try {
bgCSS = {left: 0, top: 0}
bgWidth = rootElement.width();
bgHeight = bgWidth / imgRatio;
-
+
// Make adjustments based on image ratio
// Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
if(bgHeight >= rootElement.height()) {
@@ -103,16 +122,16 @@
if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
}
- $("#backstretch, #backstretch img:not(.deleteable)").width( bgWidth ).height( bgHeight )
- .filter("img").css(bgCSS);
+ $(".backstretch, .backstretch img:last").width( bgWidth ).height( bgHeight )
+ .filter("img").css(bgCSS);
} catch(err) {
// IE7 seems to trigger _adjustBG before the image is loaded.
// This try/catch block is a hack to let it fail gracefully.
}
-
+
// Executed the passed in function, if necessary
if (typeof fn == "function") fn();
}
};
-
+
})(jQuery);
View
@@ -1,11 +1,20 @@
/*
* jQuery Backstretch
- * Version 1.2.5
+ * Version 1.3
* http://srobbin.com/jquery-plugins/jquery-backstretch/
+ * http://github.com/colorjar/jquery-backstretch/
*
* Add a dynamically-resized background image to the page
*
+ * This is a fork of SRobbin's original 1.2.2 script.
+ * It includes additional options and the ability to apply
+ * the backstretch to multiple DIV containers, instead of
+ * only the BODY of a page.
+ *
+ * ColorJar Author
+ * Tim Novinger | http://github.com/timnovinger
+ *
* Copyright (c) 2011 Scott Robbin (srobbin.com)
* Dual licensed under the MIT and GPL licenses.
*/
-;(function(a){a.backstretch=function(l,b,j){function m(c){try{h={left:0,top:0},e=f.width(),d=e/k,d>=f.height()?(i=(d-f.height())/2,g.centeredY&&a.extend(h,{top:"-"+i+"px"})):(d=f.height(),e=d*k,i=(e-f.width())/2,g.centeredX&&a.extend(h,{left:"-"+i+"px"})),a("#backstretch, #backstretch img:not(.deleteable)").width(e).height(d).filter("img").css(h)}catch(b){}"function"==typeof c&&c()}var n={centeredX:!0,centeredY:!0,speed:0},c=a("#backstretch"),g=c.data("settings")||n;c.data("settings");var f="onorientationchange"in window?a(document):a(window),k,e,d,i,h;b&&"object"==typeof b&&a.extend(g,b);b&&"function"==typeof b&&(j=b);a(document).ready(function(){if(l){var b;0==c.length?c=a("<div />").attr("id","backstretch").css({left:0,top:0,position:"fixed",overflow:"hidden",zIndex:-999999,margin:0,padding:0,height:"100%",width:"100%"}):c.find("img").addClass("deleteable");b=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).bind("load",function(b){var d=a(this),e;d.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();b=this.height||a(b.target).height();k=e/b;m(function(){d.fadeIn(g.speed,function(){c.find(".deleteable").remove();"function"==typeof j&&j()})})}).appendTo(c);0==a("body #backstretch").length&&a("body").append(c);c.data("settings",g);b.attr("src",l);a(window).resize(m)}});return this}})(jQuery);
+(function(a){a.backstretch=function(b,c,d){function p(b){try{n={left:0,top:0};k=rootElement.width();l=k/i;if(l>=rootElement.height()){m=(l-rootElement.height())/2;if(g.centeredY)a.extend(n,{top:"-"+m+"px"})}else{l=rootElement.height();k=l*i;m=(k-rootElement.width())/2;if(g.centeredX)a.extend(n,{left:"-"+m+"px"})}a(".backstretch, .backstretch img:last").width(k).height(l).filter("img").css(n)}catch(c){}if(typeof b=="function")b()}function o(){if(b){var c;if(f.length==0){f=a("<div />").attr("class","backstretch").css({left:0,top:0,position:g.positionType,overflow:"hidden",zIndex:g.zIndex,margin:0,padding:0,height:"100%",width:"100%"})}else{f.find("img").addClass("deleteable")}c=a("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:g.zIndex}).bind("load",function(b){var c=a(this),e,h;c.css({width:"auto",height:"auto"});e=this.width||a(b.target).width();h=this.height||a(b.target).height();i=e/h;p(function(){c.fadeIn(g.speed,function(){f.find(".deleteable").remove();if(typeof d=="function")d()})})}).appendTo(f);var e=a(g.target),h=g.injectUsingPrepend?"prepend":"append";if(e.is("*")&&e.find(".backstretch").length==0){e[h](f)}f.data("settings",g);c.attr("src",b);a(window).resize(p)}}var e={target:"body",injectUsingPrepend:false,positionType:"fixed",centeredX:true,centeredY:true,zIndex:"-999999",speed:0},f=a(".backstretch"),g=f.data("settings")||e,h=f.data("settings"),i,j,k,l,m,n;if(c&&typeof c=="object")a.extend(g,c);if(g.target=="body"){rootElement="onorientationchange"in window?a(document):a(window)}else{rootElement=a(g.target)}a(document).ready(o);return this}})(jQuery)