Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Added the ability to call on other elements (such as div etc.)

This update includes the ability to call the Backstretch function on
other elements, and will also handle multiple instances within one page.
  • Loading branch information...
commit f257aec79f62137e76e744ba5176006b2feab73d 1 parent c08afd9
@danmillar authored
View
23 README.textile
@@ -1,11 +1,13 @@
h1. jQuery Backstretch
+PLEASE NOTE: This is a fork of the offical jQuery Backstretch by @srobbin. This version includes the ability to call Backstretch on any block level element and handles multiple instances.
+
Backstretch is a jQuery plugin that allows you to add a dynamically-resized background image to any page.
The image will stretch to fit the page, and will automatically resize as the window size changes.
h2. Demo
-There are a couple of examples included with this package, or feel free to check it out live "on the project page itself.":http://srobbin.com/jquery-plugins/jquery-backstretch/
+There are a couple of examples included with this package.
h2. Options
@@ -49,8 +51,19 @@ Want to change the image after Backstretch has been loaded? No problem, just cal
</script>
</code></pre>
+If you require Backstretch to work on one or more elements inside the page, rather than the page itself, simply call it on the element:
+
+<pre><code><script type="text/javascript">
+ $('#myDiv').backstretch("/path/to/image.jpg", {speed: 150});
+</script>
+</code></pre>
+
h2. Changelog
+h3. Version 1.3 - Unofficial
+
+* You can now call backstretch on one or more elements.
+
h3. Version 1.2
* You can now called backstretch twice, and it will replace the existing image.
@@ -60,10 +73,4 @@ h3. Version 1.1
* Added 'centeredX' and 'centeredY' options.
* Removed 'hideUntilReady' option. It looks pretty bad if you don't hide the image until it's fully loaded.
* Fixed IE img onload bug.
-* Now supports iPhone/iPad orientation changes.
-
-h2. Support
-
-Basic support is offered through Github’s issues tracker. Many requests are resolved through the help of fellow Backstretch users and myself, however assistance is not guaranteed or timely.
-
-If you are in need of immediate support, or would like customizations to the script, "Premium Support":https://www.paypal.com/cgi-bin/webscr?business=scott@halobrite.com&cmd=_xclick&currency_code=USD&amount=17&item_name=jQuery%20Backstretch%20Premium%20Support is available for $17. Premium Support provides you with direct email access to me, and allows me to set time aside to help solve your problem quickly.
+* Now supports iPhone/iPad orientation changes.
View
35 examples/basic-div.html
@@ -0,0 +1,35 @@
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8" />
+ <style>
+ body { font-family: Helvetica, Arial, sans-serif; }
+ .container {
+ width: 90%;
+ margin: 20px auto;
+ color: #FFF;
+ padding: 50px 20px 100px 20px;
+ }
+ p { background: #666; background: rgba(0,0,0,0.4); }
+ pre { border: 1px solid #CCC; background-color: #EEE; color: #333; padding: 10px; }
+ </style>
+</head>
+<body>
+ <div class="container">
+ <h1>Basic Demo - Div</h1>
+ <p>This is a basic demo of jQuery Backstretch being applied to a div with a class of 'container' rather than the body. You can of course change this to be almost any block level element and it also handles multiple instances.</p>
+ <pre><code>
+&lt;script src=&quot;../lib/jquery-1.6.4.min.js&quot;&gt;&lt;/script&gt;
+&lt;script src=&quot;../jquery.backstretch.min.js&quot;&gt;&lt;/script&gt;
+&lt;script&gt;
+ $('.container').backstretch(&quot;pot-holder.jpg&quot;);
+&lt;/script&gt;
+ </code></pre>
+ </div>
+ <script src="../lib/jquery-1.6.4.min.js"></script>
+ <script src="../jquery.backstretch.min.js"></script>
+ <script>
+ $('.container').backstretch("pot-holder.jpg");
+ </script>
+</body>
+</html>
View
222 jquery.backstretch.js
@@ -1,118 +1,150 @@
/*
* jQuery Backstretch
- * Version 1.2.5
+ * Version 1.3
* http://srobbin.com/jquery-plugins/jquery-backstretch/
*
* Add a dynamically-resized background image to the page
*
* Copyright (c) 2011 Scott Robbin (srobbin.com)
* Dual licensed under the MIT and GPL licenses.
+ *
+ * modified 2012-01-26 by Dan Millar (@danmillar)
+ * added ability to call backstretch on other elements
*/
;(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)
- },
- 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);
+
+ $.fn.backstretch = function(src, options, callback) {
+ return this.each(function(i){
+
+ 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)
+ },
+ el = $(this),
+ isBody = (el.get(0).tagName == undefined) ? true : false,
+ container = isBody ? $(".backstretch") : el.find(".backstretch"),
+ settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
+ existingSettings = container.data("settings'"),
+ 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;
+
+ // Initialize
+ $(document).ready(_init);
+
+ // For chaining
+ return this;
- // Just in case the user passed in a function without options
- if(options && typeof options == "function") callback = options;
+ function _init() {
+ // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
+ if(src) {
+ var img;
+
+ if(!isBody) {
+ // If not being added to the body set position to relative to keep backstretch contained
+ el.css({position: "relative", background: "none"});
+ }
+
+ // If this is the first time that backstretch is being called
+ if(container.length == 0) {
+ container = $("<div />").attr("class", "backstretch")
+ .css({left: 0, top: 0, position: (isBody ? "fixed" : "absolute"), overflow: "hidden", zIndex: (isBody ? -999999 : -999998), margin: 0, padding: 0, height: "100%", width: "100%"});
+ } else {
+ // Prepare to delete any old images
+ container.find("img").addClass("deleteable");
+ }
- // Initialize
- $(document).ready(_init);
-
- // For chaining
- return this;
+ img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999})
+ .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();
+ imgRatio = imgWidth / imgHeight;
- function _init() {
- // Prepend 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%"});
- } 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) {
- var self = $(this),
- imgWidth, imgHeight;
-
- self.css({width: "auto", height: "auto"});
- imgWidth = this.width || $(e.target).width();
- imgHeight = this.height || $(e.target).height();
- imgRatio = imgWidth / imgHeight;
-
- _adjustBG(function() {
- self.fadeIn(settings.speed, function(){
- // Remove the old images, if necessary.
- container.find('.deleteable').remove();
- // Callback
- if(typeof callback == "function") callback();
+ _adjustBG(function() {
+ self.fadeIn(settings.speed, function(){
+ // Remove the old images, if necessary.
+ container.find('.deleteable').remove();
+ // Callback
+ 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);
- }
-
- // Attach the settings
- container.data("settings", settings);
+
+ })
+ .appendTo(container);
+
+ // Append the container to the body, if it's not already there
+ if(el.children(".backstretch").length == 0) {
+ if(isBody) {
+ $('body').append(container);
+ } else {
+ el.append(container);
+ }
+ }
- 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);
+ // 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()) {
- bgOffset = (bgHeight - rootElement.height()) /2;
- if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
- } else {
- bgHeight = rootElement.height();
- bgWidth = bgHeight * imgRatio;
- bgOffset = (bgWidth - rootElement.width()) / 2;
- if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
+ function _adjustBG(fn) {
+ try {
+ bgCSS = {left: 0, top: 0};
+ bgWidth = _width();
+ bgHeight = bgWidth / imgRatio;
+
+ // Make adjustments based on image ratio
+ // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
+ if(bgHeight >= _height()) {
+ bgOffset = (bgHeight - _height()) /2;
+ if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
+ } else {
+ bgHeight = _height();
+ bgWidth = bgHeight * imgRatio;
+ bgOffset = (bgWidth - _width()) / 2;
+ if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
+ }
+
+ container.children("img:not(.deleteable)").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.
}
-
- $("#backstretch, #backstretch img:not(.deleteable)").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();
}
-
- // Executed the passed in function, if necessary
- if (typeof fn == "function") fn();
- }
+
+ function _width() {
+ return isBody ? el.width() : el.outerWidth();
+ }
+
+ function _height() {
+ return isBody ? el.height() : el.outerHeight();
+ }
+
+ });
+ };
+
+ $.backstretch = function(src, options, callback) {
+ var el = ("onorientationchange" in window) ? $(document) : $(window); // hack to acccount for iOS position:fixed shortcomings
+
+ el.backstretch(src, options, callback);
};
})(jQuery);
View
7 jquery.backstretch.min.js
@@ -1,11 +1,14 @@
/*
* jQuery Backstretch
- * Version 1.2.5
+ * Version 1.3
* http://srobbin.com/jquery-plugins/jquery-backstretch/
*
* Add a dynamically-resized background image to the page
*
* Copyright (c) 2011 Scott Robbin (srobbin.com)
* Dual licensed under the MIT and GPL licenses.
+ *
+ * modified 2012-01-26 by Dan Millar (@danmillar)
+ * added ability to call backstretch on other elements
*/
-;(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($){$.fn.backstretch=function(src,options,callback){return this.each(function(i){var defaultSettings={centeredX:true,centeredY:true,speed:0},el=$(this),isBody=(el.get(0).tagName==undefined)?true:false,container=isBody?$(".backstretch"):el.find(".backstretch"),settings=container.data("settings")||defaultSettings,existingSettings=container.data("settings'"),imgRatio,bgImg,bgWidth,bgHeight,bgOffset,bgCSS;if(options&&typeof options=="object")$.extend(settings,options);if(options&&typeof options=="function")callback=options;$(document).ready(_3);return this;function _3(){if(src){var img;if(!isBody){el.css({position:"relative",background:"none"})}if(container.length==0){container=$("<div />").attr("class","backstretch").css({left:0,top:0,position:(isBody?"fixed":"absolute"),overflow:"hidden",zIndex:(isBody?-999999:-999998),margin:0,padding:0,height:"100%",width:"100%"})}else{container.find("img").addClass("deleteable")}img=$("<img />").css({position:"absolute",display:"none",margin:0,padding:0,border:"none",zIndex:-999999}).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();imgRatio=imgWidth/imgHeight;_1(function(){self.fadeIn(settings.speed,function(){container.find('.deleteable').remove();if(typeof callback=="function")callback()})})}).appendTo(container);if(el.children(".backstretch").length==0){if(isBody){$('body').append(container)}else{el.append(container)}}container.data("settings",settings);img.attr("src",src);$(window).resize(_1)}}function _1(fn){try{bgCSS={left:0,top:0};bgWidth=_2();bgHeight=bgWidth/imgRatio;if(bgHeight>=_0()){bgOffset=(bgHeight-_0())/2;if(settings.centeredY)$.extend(bgCSS,{top:"-"+bgOffset+"px"})}else{bgHeight=_0();bgWidth=bgHeight*imgRatio;bgOffset=(bgWidth-_2())/2;if(settings.centeredX)$.extend(bgCSS,{left:"-"+bgOffset+"px"})}container.children("img:not(.deleteable)").width(bgWidth).height(bgHeight).filter("img").css(bgCSS)}catch(err){}if(typeof fn=="function")fn()}function _2(){return isBody?el.width():el.outerWidth()}function _0(){return isBody?el.height():el.outerHeight()}})};$.backstretch=function(src,options,callback){var el=("onorientationchange"in window)?$(document):$(window);el.backstretch(src,options,callback)}})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.