Skip to content

Instantly share code, notes, and snippets.

@miketucker
Created November 15, 2011 21:25
Show Gist options
  • Save miketucker/1368404 to your computer and use it in GitHub Desktop.
Save miketucker/1368404 to your computer and use it in GitHub Desktop.
i hate jesse
/*
* jQuery Backstretch
* Version 1.2.4
* 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.
*/
(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);
// 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) {
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}).appendTo(container);
var self = $(img);
var imgWidth, imgHeight;
self.css({width: "auto", height: "auto"});
imgWidth = img.width || $(e.target).width();
imgHeight = img.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();
});
});
// 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);
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"});
}
$("#backstretch, #backstretch img").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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment