Vertical-align выравнивание у jQuery-карусели?

Question

[Alexander]

Есть скрипт карусели webdesignandsuch.com/posts/fancymoves/index.html

Во всех настройках кастомизации разобрался, но никак не получается поменять выравнивание товаров: хочу инвертировать, чтобы центральный товар был выше боковых (сейчас он ниже).

Объясните как… jQuery только изучаю.

Ссылка на архив со скриптом.

Answer 1

[Anton Bobylev]

В скрипте нужно изменить (заменить нижеприведенными) две функции, в которых помимо изменения ширины изображения и размера шрифта меняется еще и отступ сверху:

// Resize panels to normal
base.returnToNormal = function(num, time) {
    var panels = base.$panels.not(':eq(' + (num - 1) + ')').removeClass(base.options.currentPanel);
    if (base.options.reducedSize === 1) {
        panels.css({
            width: base.regWidth
        }); // excluding fontsize change to prevent video flicker
    } else {
        panels.animate({
            width: base.regWidth,
            fontSize: base.options.reducedSize + 'em',
            marginTop: (100 * base.options.reducedSize + parseInt(panels.css('padding')) * 2) + 'px'
        }, (time === 0) ? time : base.options.speed);
    }
};

// Zoom in on selected panel
base.growBigger = function(num, time, flag) {
    var panels = base.$panels.eq(num - 1);
    if (base.options.reducedSize === 1) {
        panels.css({
            width: base.curWidth
        }); // excluding fontsize change to prevent video flicker
        if (base.initialized) {
            base.completed(num, flag);
        }
    } else {
        panels.animate({
            width: base.curWidth,
            fontSize: '1em',
            marginTop: '0'
        }, (time === 0) ? time : base.options.speed, function() {
            // completed event trigger
            // even though animation is not queued, trigger is here because it is the last animation to complete
            if (base.initialized) {
                base.completed(num, flag);
            }
        });
    }
};​

Comments

[Alexander]

Если я правильно понял, то после такой замены нужно изменять значение marginTop: '0'.
После его изменения, например при значении '50', центральный товар сдвигается, но левый товар оказывается ниже правого. А при значении '-50' вверх сдвигаются все товары и при этом правый оказывается ниже левого.
Но спасибо за подсказку, попробую применить этот способ к другим функциям.

[Anton Bobylev]

Если очень нужно, то изменять значение в этой строке:

marginTop: (100 * base.options.reducedSize + parseInt(panels.css('padding')) * 2) + 'px'

В данном случае я попытался максимально уйти от хардкодинга значений:
100 — потому что base.options.reducedSize указывается в процентах (по умолчанию 0.8)
parseInt(panels.css('padding')) * 2 — учитываются внутренние отступы заданные в css как padding:5px; два — потому что отступы с обеих сторон.

Но ни что не мешает там прописать напрямую '90px' или любое другое значение/переменную.

[Alexander]

Разобрался. Спасибо!!!