Posted By

ryarwood on 09/23/11


Tagged

javascript jquery screen full backstretch


Versions (?)

Animated Backstretch


 / Published in: JavaScript
 

URL: http://www.allurewaikiki.com

  1. (function($) {
  2.  
  3. $.backstretch = function(src, options, callback) {
  4. var defaultSettings = {
  5. centeredX: true, // Should we center the image on the X axis?
  6. centeredY: true, // Should we center the image on the Y axis?
  7. speed: 1500 // fadeIn speed for background after image loads (e.g. "fast" or 500)
  8. },
  9. container = $("#backstretch"),
  10. settings = container.data("settings") || defaultSettings, // If this has been called once before, use the old settings as the default
  11. existingSettings = container.data('settings'),
  12. rootElement = ("onorientationchange" in window) ? $(document) : $(window), // hack to acccount for iOS position:fixed shortcomings
  13. imgRatio, bgImg, bgWidth, bgHeight, bgOffset, bgCSS;
  14.  
  15. // Extend the settings with those the user has provided
  16. if(options && typeof options == "object") $.extend(settings, options);
  17.  
  18. // Initialize
  19. $(document).ready(_init);
  20.  
  21. // For chaining
  22. return this;
  23.  
  24. function _init() {
  25. // Prepend image, wrapped in a DIV, with some positioning and zIndex voodoo
  26. if(src) {
  27. var img;
  28.  
  29. // If this is the first time that backstretch is being called
  30. if(container.length == 0) {
  31. container = $("<div />").attr("id", "backstretch")
  32. .css({left: 0, top: 0, position: "fixed", overflow: "hidden", zIndex: -999999, margin: 0, padding: 0, height: "100%", width: "100%"});
  33. } else {
  34. // Prepare to delete any old images
  35. container.find("img").addClass("deleteable");
  36. }
  37.  
  38. img = $("<img />").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: -999999})
  39. .bind("load", function(e) {
  40. var self = $(this),
  41. imgWidth, imgHeight;
  42.  
  43. self.css({width: "auto", height: "auto"});
  44. imgWidth = this.width || $(e.target).width();
  45. imgHeight = this.height || $(e.target).height();
  46. imgRatio = imgWidth / imgHeight;
  47.  
  48. _adjustBG(function() {
  49. self.fadeIn(settings.speed, function(){
  50. // Remove the old images, if necessary.
  51. container.find('.deleteable').remove();
  52. // Callback
  53. if(typeof callback == "function") callback();
  54. });
  55. });
  56.  
  57. })
  58. .appendTo(container);
  59.  
  60. // Append the container to the body, if it's not already there
  61. if($("body #backstretch").length == 0) {
  62. $("body").append(container);
  63. }
  64.  
  65. // Attach the settings
  66. container.data("settings", settings);
  67.  
  68. img.attr("src", src); // Hack for IE img onload event
  69. // Adjust the background size when the window is resized or orientation has changed (iOS)
  70. $(window).resize(_adjustBG);
  71. }
  72. }
  73.  
  74. function _adjustBG(fn) {
  75. try {
  76. bgCSS = {left: 0, top: 0}
  77. bgWidth = rootElement.width();
  78. bgHeight = bgWidth / imgRatio;
  79.  
  80. // Make adjustments based on image ratio
  81. // Note: Offset code provided by Peter Baker (http://ptrbkr.com/). Thanks, Peter!
  82. if(bgHeight >= rootElement.height()) {
  83. bgOffset = (bgHeight - rootElement.height()) /2;
  84. if(settings.centeredY) $.extend(bgCSS, {top: "-" + bgOffset + "px"});
  85. } else {
  86. bgHeight = rootElement.height();
  87. bgWidth = bgHeight * imgRatio;
  88. bgOffset = (bgWidth - rootElement.width()) / 2;
  89. if(settings.centeredX) $.extend(bgCSS, {left: "-" + bgOffset + "px"});
  90. }
  91.  
  92. $("#backstretch img:last").width( bgWidth ).height( bgHeight ).css(bgCSS);
  93. } catch(err) {
  94. // IE7 seems to trigger _adjustBG before the image is loaded.
  95. // This try/catch block is a hack to let it fail gracefully.
  96. }
  97.  
  98. // Executed the passed in function, if necessary
  99. if (typeof fn == "function") fn();
  100. }
  101. };
  102.  
  103. })(jQuery);
  104.  
  105. var images = ["/images/site/background-home-waikiki-shoreline.jpg","/images/site/background-home-waterdrop.jpg"];
  106. var index = 0;
  107. $.backstretch(images[index]);
  108. setInterval(function() {
  109. index = (index >= images.length - 1) ? 0 : index + 1;
  110. $.backstretch(images[index]);
  111. }, 8000);

Report this snippet  

You need to login to post a comment.