Динамическое изменение размера карусели
Вложений: 1
Камрады, помогите, пожалуйста, доработать скрипт.
Задача такая, чтобы при изменении разрешения экрана карусель динамически меняла размер, либо скрипт перезапускался с новыми параметрами ширины и высоты блоков и изображений. Вообщем, чтобы была резиновая карусель. Значит имеется такаякарусель. В ней ширина и высота изображения берутся автоматически исходя из размеров изображения. /* 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, скрипт сразу не срабатывает, а только после изменения ширины. Вообщем потерялся я в этом лесу. Помогите, пожалуйста, дилетанту. Для наглядности прицеплю исходники, там всё видно |
Liberbox,
в этом плагине переинициализация непредусмотрена -- новые данные накладываются на старые, а не замещают их. |
Цитата:
Может посоветуете тогда подобную карусель с 3D эфектом, но резиновую? Сколько искал, не нашёл. Все плоские или в виде галерей, когда изображения просто по бокам. |
Часовой пояс GMT +3, время: 06:50. |