Резиновые изображения через javascript

L
На сайте с 28.08.2014
Offline
2
728

Спецы, подскажите дилетанту, есть ли возможность сделать изображения резиновыми поправив javascript?

Суть такова:

Имеется карусель

Там в css есть класс "carousel-image", но изменение значений ширины и высоты не меняет размер изображения при изменении разрешения экрана, так как путь к изображениям прописывается в коде страницы. Например, для других картинок на сайте я везде делал через сss, вот так:

background:url(.............) no-repeat;
max-width:100%;
height:...px;
background-size:100% 100%;
Всё хорошо работает, а вот в карусели на уровне скрипта заложено, что ширина и высота берутся автоматически исходя из размеров изображения. Даже если сделать резиновым блок-обёртку #carousel, всё равно мешает фиксированый размер изображений, который определяет скрипт самостоятельно.

Расковырял скрипт, нашёл, что ширина и высота блоков в том числе изображений заданы так

/* These are univeral values that are used throughout the plugin. Do not modify them
* unless you know what you're doing. Most of them feed off the options
* so most customization can be achieved by modifying the options values */
var pluginData = {
currentCenterNum: options.startingFeature,
containerWidth: 0,
containerHeight: 0,
largeFeatureWidth: 0,
largeFeatureHeight: 0,
smallFeatureWidth: 0,
smallFeatureHeight: 0,

totalFeatureCount: $(this).children("div").length,
currentlyMoving: false,
featuresContainer: $(this),
featuresArray: [],
containerIDTag: "#"+$(this).attr("id"),
timeoutVar: null,
rotationsRemaining: 0,
itemsToAnimate: 0,
borderWidth: 0
};

Потом ширина задаётся так:

// Place all the features in a center hidden position to start off
pluginData.featuresContainer
// Have to make the container relative positioning
.find(".carousel-feature").each(function () {
// Center all the features in the middle and hide them
$(this).css({
'left': (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2),
'width': pluginData.smallFeatureWidth,
'height': pluginData.smallFeatureHeight,

'top': options.smallFeatureOffset + options.topPadding,
'opacity': 0
});
})
// Set all the images to small feature size
.find(".carousel-image").css({
'width': pluginData.smallFeatureWidth

});

И рассчёт css в зависимости от положения изображения - фронтальное или второстепенное, производится так:

// Calculate new new css values depending on where the feature will be located
if (newPosition == 1) {
new_width = pluginData.largeFeatureWidth;
new_height = pluginData.largeFeatureHeight;

new_top = options.topPadding;
new_zindex = $feature.css("z-index");
new_left = (pluginData.containerWidth / 2) - (pluginData.largeFeatureWidth / 2) - (pluginData.borderWidth / 2);
new_fade = 1.0;
} else {
new_width = pluginData.smallFeatureWidth;
new_height = pluginData.smallFeatureHeight;

new_top = options.smallFeatureOffset + options.topPadding;
new_zindex = 1;
new_fade = 0.4;
// some info is different for the left, right, and hidden positions
// left
if (newPosition == pluginData.totalFeatureCount) {
new_left = options.sidePadding;
// right
} else if (newPosition == 2) {
new_left = pluginData.containerWidth - pluginData.smallFeatureWidth - options.sidePadding - pluginData.borderWidth;
// hidden
} else {
new_left = (pluginData.containerWidth / 2) - (pluginData.smallFeatureWidth / 2) - (pluginData.borderWidth / 2);
new_fade = 0;
}
}

Предполагаю, что для того, чтобы была возможность менять ширину и высоту блоков и изображений они должны быть заданы в самом скрипте с помощью css должно быть что-то типа такого вместо значения 0:

var pluginData = {
largeFeatureWidth: $(this).css("max-width", "100%")
...

И так далее, т.е., то, что отвечает за ширину и высоту. Но как это действительно правильно сделать:confused:

И реально ли вообще такое? Или искать другую карусель - резиновую?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий