Камрады, помогите, пожалуйста, доработать скрипт.
Задача такая, чтобы при изменении разрешения экрана карусель динамически меняла размер, либо скрипт перезапускался с новыми параметрами ширины и высоты блоков и изображений. Вообщем, чтобы была резиновая карусель.
Значит имеется такая
карусель.
В ней ширина и высота изображения берутся автоматически исходя из размеров изображения.
/* 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
};
Потом сss по размерам изображения задаётся таким образом
// 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
});
И рассчёт размеров в зависимости от положения изображения - фронт или бэк, производится так:
// 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;
}
}
Нашёл в сети, что это можно сделать с помощью .width и .resize, но как именно это реализовать понятия не имею. Всё методом тыка. Не кидайте тапками пожалуйста, я вообще юрист, только сайт решил сделать самостоятельно.
Вообщем пытался реализовать таким образом
$(function(){
if ( $(window).width() > 1366) { //проверяем разрешение экрана, если ширина больше 1366, скрипт срабатывает по дефолту со своими настройками
$("#carousel").featureCarousel({
topPadding:0,
sidePadding: 30,
displayCutoff:3,
trackerIndividual:false,
trackerSummation:false
// include options like this:
// (use quotes only for string values, and no trailing comma after last option)
// option: value,
// option: value
});
}
$(window).resize(function() { //если разрешение экрана меняет юзер
if ( $(window).width() < 1366) {// в сторону уменьшения от 1366, тогда срабатывает скрипт с новыми настройками ширины и высоты блоков
$("#carousel").featureCarousel({
topPadding:0,
sidePadding: 30,
displayCutoff:3,
trackerIndividual:false,
trackerSummation:false,
containerWidth: .5,
containerHeight: .3,
largeFeatureWidth: .5,
largeFeatureHeight: .3,
smallFeatureWidth: .1,
smallFeatureHeight: .1
});
}
});
});
Результат таков: при загрузке страницы, если ширина > 1366, всё нормально работает, при измении ширины в сторону уменьшения, скрипт перезапускается с новыми параметрами, НО криво.
Начинает мотать изображения из стороны в сторону не пойми как, кажется, что скорость вращения увеличилась, размеры изображений при этом постоянно меняются, однако, не меняются размеры основного блока containerWidth и containerHeight. Даже если делать блок-обёртку .carousel-container с max-width в сss, всё равно размер блока карусели не меняется. Если обратно вернуть к исходному разрешению, то скрипт НЕ перезапускается, а отрабатывает также с маленькими изображениями. Если обновить страницу при шириние <1366, скрипт сразу не срабатывает, а только после изменения ширины.
Вообщем потерялся я в этом лесу.
Помогите, пожалуйста, дилетанту.
Для наглядности прицеплю исходники, там всё видно
