Я пытаюсь модифицировать Coda-Slider 2.0 (http://www.ndoherty.biz/tag/coda-slider/), чтобы использовать ширину в процентах вместо жестко заданных размеров пикселей, чтобы можно было изменять размер флюида. Я добился фантастической работы, за исключением небольшого сбоя вIE7 (Firefox не демонстрирует такого поведения), когда я пытаюсь вернуться на панель 1.
Когда я запускаю файл index.html по умолчанию, который поставляется с coda-slider 2.0, все работает нормально в IE7.в изображениях вместо текста по умолчанию, и это тоже хорошо работает. Затем я изменил CSS и JS на использование ширины в процентах - это прекрасно работает, за исключением случаев, когда я пытаюсь вернуться на первую панель - когда я это делаю, скажем,с панели 4 вместо плавной анимации обратно на панель 1 вид мгновенно переходит на полпути между панелью 1 и панелью 2, а затем анимируется обратно на панель 1.
Это можно увидеть на тестовой площадке, которую я настроил:
http://www.lootcorp.com/animateissue/
Ниже приведен исходный код измененного файла Coda-Slider JS, который я использую. Примечание Я удалил весь несущественный код для упрощенияfy debugging.
Проблема связана с линией:
offset = - (panelWidth*z) + "%";
Я подумал, что анимации не нравится получать значение "0%" в качестве значения, поэтому я попытался скормить его«0» и «0px» при выборе панели 1 - тот же результат.Конечный результат верный - в конечном итоге div правильно позиционируется по левому краю: 0, но я понятия не имею, почему он пропускает позицию на полпути между панелями 1 и 2, прежде чем сделать это.(Анимация с панели 4 на 3 или 2 работает нормально).Я попытался использовать «left» вместо «margin-left» с теми же результатами.
Ошибка или глупая, упущенная из виду ошибка?Любой совет с благодарностью !!
js источник файла:
$(function(){
// Remove the coda-slider-no-js class from the body
$("body").removeClass("coda-slider-no-js");
// Preloader
$(".coda-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="images/ajax-loader.gif" alt="loading..." /></p>');
});
var sliderCount = 1;
$.fn.codaSlider = function(settings) {
settings = $.extend({
autoHeight: true,
autoHeightEaseDuration: 1000,
autoHeightEaseFunction: "easeInOutExpo",
autoSlide: false,
autoSlideInterval: 7000,
autoSlideStopWhenClicked: true,
crossLinking: true,
dynamicArrows: true,
dynamicArrowLeftText: "« left",
dynamicArrowRightText: "right »",
dynamicTabs: true,
dynamicTabsAlign: "center",
dynamicTabsPosition: "top",
externalTriggerSelector: "a.xtrig",
firstPanelToLoad: 1,
panelTitleSelector: "h2.title",
slideEaseDuration: 1000,
slideEaseFunction: "easeInOutExpo"
}, settings);
return this.each(function(){
var slider = $(this);
var panelCount = slider.find(".panel").size();
var panelWidth = 100;
var panelContainerWidth = "400%";
var navClicks = 0; // Used if autoSlideStopWhenClicked = true
// Surround the collection of panel divs with a container div (wide enough for all panels to be lined up end-to-end)
$('.panel', slider).wrapAll('<div class="panel-container"></div>');
// Specify the width of the container div (wide enough for all panels to be lined up end-to-end)
$(".panel-container", slider).css({ width: panelContainerWidth });
// Specify the current panel.
// If the loaded URL has a hash (cross-linking), we're going to use that hash to give the slider a specific starting position...
if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
var currentPanel = parseInt(location.hash.slice(1));
var offset = - (panelWidth*(currentPanel - 1)) + "%";
$('.panel-container', slider).css({ marginLeft: offset });
// If that's not the case, check to see if we're supposed to load a panel other than Panel 1 initially...
} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
var currentPanel = settings.firstPanelToLoad;
var offset = - (panelWidth*(currentPanel - 1)) + "%";
$('.panel-container', slider).css({ marginLeft: offset });
// Otherwise, we'll just set the current panel to 1...
} else {
var currentPanel = 1;
};
// If we need a dynamic menu
if (settings.dynamicTabs) {
var dynamicTabs = '<div class="coda-nav" id="coda-nav-' + sliderCount + '"><ul></ul></div>';
switch (settings.dynamicTabsPosition) {
case "bottom":
slider.parent().append(dynamicTabs);
break;
default:
slider.parent().prepend(dynamicTabs);
break;
};
ul = $('#coda-nav-' + sliderCount + ' ul');
// Create the nav items
$('.panel', slider).each(function(n) {
ul.append('<li class="tab' + (n+1) + '"><a href="#' + (n+1) + '">' + $(this).find(settings.panelTitleSelector).text() + '</a></li>');
});
navContainerWidth = slider.width() + slider.siblings('.coda-nav-left').width() + slider.siblings('.coda-nav-right').width();
ul.parent().css({ width: navContainerWidth });
switch (settings.dynamicTabsAlign) {
case "center":
ul.css({ width: ($("li", ul).width() + 2) * panelCount });
break;
case "right":
ul.css({ float: 'right' });
break;
};
};
// If we need a tabbed nav
$('#coda-nav-' + sliderCount + ' a').each(function(z) {
// What happens when a nav link is clicked
$(this).bind("click", function() {
navClicks++;
$(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
if (z == 0) {
offset = "+0px";
} else {
offset = - (panelWidth*z) + "%";
}
alert("Offset = " + offset);
// alterPanelHeight(z);
currentPanel = z + 1;
$('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
});
});
// Specify which tab is initially set to "current". Depends on if the loaded URL had a hash or not (cross-linking).
if (settings.crossLinking && location.hash && parseInt(location.hash.slice(1)) <= panelCount) {
$("#coda-nav-" + sliderCount + " a:eq(" + (location.hash.slice(1) - 1) + ")").addClass("current");
// If there's no cross-linking, check to see if we're supposed to load a panel other than Panel 1 initially...
} else if (settings.firstPanelToLoad != 1 && settings.firstPanelToLoad <= panelCount) {
$("#coda-nav-" + sliderCount + " a:eq(" + (settings.firstPanelToLoad - 1) + ")").addClass("current");
// Otherwise we must be loading Panel 1, so make the first tab the current one.
} else {
$("#coda-nav-" + sliderCount + " a:eq(0)").addClass("current");
};
// Kill the preloader
$('.panel', slider).show().end().find("p.loading").remove();
slider.removeClass("preload");
sliderCount++;
});
};