jqueryBackstretch
 

Всем привет! Помогите пожалуйста отредактить скрипт. У меня на сайте есть центральный блок в котором я использовала растягивающееся по ширине изображение в качестве фона. Нашла скрипт jquery backstretch (http://srobbin.com/blog/jquery-plugi...y-backstretch/), который ресайзит фон не конкретного блока, а всего сайта (по размерам окна). Стала его переделывать и что-то запуталась... Мне удалось подключить изображение как фон для центрального блока, но не могу настроить ресайзинг: фоновый img внутри div class="content" должен сжиматься и растягиваться по ширине при изменении размеров окна и в зависимости от размеров монитора. Страницу можно посмотреть здесь: http://home.orendzi.operaunite.com/w...indexpole.html
Исходники здесь: http://home.orendzi.operaunite.com/webserver/content/
И сам jquery код, уже мной изменённый:

(function($) {

    $.backstretch = function(src, options, callback) {
        var defaultSettings = {
            centeredX: true,         // Should we center the image on the X axis?
            centeredY: false,         // Should we center the image on the Y axis?
            speed: 300                 // 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');
                
         // 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: "absolute", overflow: "hidden", zIndex: 2, margin: 0, padding: 0, height: "100%", width: "100%"});
                } else {
                    // Prepare to delete any old images
                    container.find("img").addClass("deleteable");
                }
                /*здесь я задала img ширину как у блока content, возможно эти строчки мешают динамическому изменению ширины img?*/
                img = $("<img />").attr("id", "cent_img").css({position: "absolute", display: "none", margin: 0, padding: 0, border: "none", zIndex: 3})
                                  .bind("load", function(e) { 
										var self = $(this);								  
									  var SetWidth = $("#content").width();
                                     self.css({width: SetWidth, height: "626px"});
                                      

                                      _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($("#backstretch").length == 0) {
                    $("#content").append(container);
                }
                
                // Attach the settings
                container.data("settings", settings);
                    
                img.attr("src", src); // Hack for IE img onload event
				
// Здесь пыталась написать функцию растягивания\сжимания изображения при ресайзе окна.
				$(window).resize(function (){
					resize_cent_colum();
				});

				function resize_cent_colum(){
				var wwwight = $("#content").css('width') 
				$("#cent_img").attr("width",wwwight);
				}
            }
        }
            
        
    };
  
})(jQuery);