diff --git a/README.textile b/README.textile
index faa733a..f98ffa3 100644
--- a/README.textile
+++ b/README.textile
@@ -29,6 +29,11 @@ h3. dataName
The name of the data attribute that Anystretch will use for the image name, if none is supplied in the src. (type=String, default=stretch)
+h3. onAdjust
+
+Gets called anytime Anystretch adjusts the size of the background image.
+(type=Function, default=$.noop)
+
h2. Setup
Include the jQuery library and Anystretch plugin files in your webpage (preferably at the bottom of the page, before the closing BODY tag):
diff --git a/examples/demo-onAdjust.html b/examples/demo-onAdjust.html
new file mode 100644
index 0000000..5f56d73
--- /dev/null
+++ b/examples/demo-onAdjust.html
@@ -0,0 +1,38 @@
+
+
+
+
+ Anystretch onAdjust Demo
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/jquery.anystretch.js b/jquery.anystretch.js
index 9055c02..6ce4eb6 100644
--- a/jquery.anystretch.js
+++ b/jquery.anystretch.js
@@ -1,6 +1,8 @@
/*
* jQuery Anystretch
- * Version 1.2 (@jbrooksuk / me.itslimetime.com)
+ * Version 1.3 (@abconrad)
+ * https://github.com/abconrad/jquery-anystretch
+ * (@jbrooksuk / me.itslimetime.com)
* https://github.com/jbrooksuk/jquery-anystretch
* Based on Dan Millar's Port
* https://github.com/danmillar/jquery-anystretch
@@ -16,7 +18,7 @@
*/
;(function($) {
-
+
$.fn.anystretch = function(src, options, callback) {
var isBody = this.selector.length ? false : true; // Decide whether anystretch is being called on an element or not
@@ -26,7 +28,8 @@
positionY: 'center', // Should we center the image on the Y axis?
speed: 0, // fadeIn speed for background after image loads (e.g. "fast" or 500)
elPosition: 'relative', // position of containing element when not being added to the body
- dataName: 'stretch' // The data-* name used to search for
+ dataName: 'stretch', // The data-* name used to search for
+ onAdjust: $.noop // Callback to be called after any adjustment is complete
},
el = $(this),
container = isBody ? $('.anystretch') : el.children(".anystretch"),
@@ -36,26 +39,26 @@
// 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;
-
+
function _init() {
// Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
if(src || el.length >= 1) {
var img;
-
+
if(!isBody) {
// If not being added to the body set position to elPosition (default: relative) to keep anystretch contained
el.css({position: settings.elPosition, background: "none"});
}
-
+
// If this is the first time that anystretch is being called
if(container.length == 0) {
container = $("").attr("class", "anystretch")
@@ -64,17 +67,17 @@
// Prepare to delete any old images
container.find("img").addClass("deleteable");
}
-
+
img = $("![]()
").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999})
- .bind("load", function(e) {
+ .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.
@@ -83,10 +86,10 @@
if(typeof callback == "function") callback();
});
});
-
+
})
.appendTo(container);
-
+
// Append the container to the body, if it's not already there
if(el.children(".anystretch").length == 0) {
if(isBody) {
@@ -95,10 +98,10 @@
el.append(container);
}
}
-
+
// Attach the settings
container.data("settings", settings);
-
+
var imgSrc = "";
if(src) {
imgSrc = src;
@@ -108,23 +111,23 @@
return;
}
img.attr("src", imgSrc); // 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 = _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.positionY == 'center' || settings.centeredY) { //
+ if(settings.positionY == 'center' || settings.centeredY) { //
$.extend(bgCSS, {top: "-" + bgOffset + "px"});
} else if(settings.positionY == 'bottom') {
$.extend(bgCSS, {top: "auto", bottom: "0px"});
@@ -139,33 +142,36 @@
$.extend(bgCSS, {left: "auto", right: "0px"});
}
}
-
+
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.
}
-
+
// Executed the passed in function, if necessary
if (typeof fn == "function") fn();
+
+ // Execute the onAdjust callback
+ if (options && typeof options.onAdjust == "function") options.onAdjust();
}
-
+
function _width() {
return isBody ? el.width() : el.innerWidth();
}
-
+
function _height() {
return isBody ? el.height() : el.innerHeight();
}
-
+
});
};
-
+
$.anystretch = function(src, options, callback) {
var el = ("onorientationchange" in window) ? $(document) : $(window); // hack to acccount for iOS position:fixed shortcomings
-
+
el.anystretch(src, options, callback);
};
-
+
})(jQuery);
\ No newline at end of file