Всем привет! Помогите пожалуйста отредактить скрипт. У меня на сайте есть центральный блок в котором я использовала растягивающееся по ширине изображение в качестве фона. Нашла скрипт 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);