Показать сообщение отдельно
  #15 (permalink)  
Старый 27.12.2010, 15:15
Профессор
Отправить личное сообщение для Nanto Посмотреть профиль Найти все сообщения от Nanto
 
Регистрация: 21.12.2010
Сообщений: 243

Оп-па! А вот этого я не предусмотрел!..
Тестил карусель только на картинках с вертикальной ориентацией, а если в списке есть альбомная - всё идёт через ж..!
Поля (margin) тогда получаются разные и размер контейнера вычисляется как квадрат со стороной равной высоте картинки...
Ладно, размер контейнера я задал принудительно через CSS.
Но вот поля выровнять через CSS видимо нереально... Поскольку применить какие-то свойства стиля можно только к уже сгенерированному скриптом контейнеру, но не к картинке внутри него, так?
причём это болезнь всех каруселей что я видел (поля разного размера между картинками с вертикальной и горизонтальной ориентацией)... Это можно обойти? Как я понимаю, корректно реализовать анимацию в скрипте можно только при условии равенства длинны каждого контейнера?..
Видимо, если и можно, то все равно будеи коряво - некоторые элементы не будут вмещаться целиком на полосу прокрутки и т.д.

Тогда придётся делать квадратные боксы приятного вида и размещать картинки в них, в связи с этим несколько вопросов.
Вприведенном ниже куске .js, лишнее я выкинул (то что касается инициализации и анимации, оставил только то что кмк касается стиля оформления). С самим CSS я разберусь, а вот с "оформлением" в js туплю:
1) где (в какой функции или какой переменной) задаются размеры контейнера (или вычисляются) - хочу задать иx фиксированным значением (например 200x200 px.);
2) как разместить картинку посередине контейнера (по умолчанию они сдвинуты top, и видимо left);
3) можно ли в этот код ввести условие, чтобы вначале загружался фон контейнера (одинаковый для всех), а затем через z-index поверх уже лепилась картинка?

//бла-бла...
        var running = false, animCss=o.vertical?"top":"left", sizeCss=o.vertical?"height":"width";
        var div = $(this), ul = $("ul", div), tLi = $("li", ul), tl = tLi.size(), v = o.visible;

        if(o.circular) {
            ul.prepend(tLi.slice(tl-v-1+1).clone())
              .append(tLi.slice(0,v).clone());
            o.start += v;
        }

        var li = $("li", ul), itemLength = li.size(), curr = o.start;
        div.css("visibility", "visible");

        li.css({overflow: "hidden", float: o.vertical ? "none" : "left"});
        ul.css({margin: "0", padding: "0", position: "relative", "list-style-type": "none", "z-index": "1"});
        div.css({overflow: "hidden", position: "relative", "z-index": "2", left: "0px"});

        var liSize = o.vertical ? height(li) : width(li);   // Full li size(incl margin)-Used for animation
        var ulSize = liSize * itemLength;                   // size of full ul(total length, not just for the visible items)
        var divSize = liSize * v;                           // size of entire div(total length for just the visible items)

        li.css({width: li.width(), height: li.height()});
        ul.css(sizeCss, ulSize+"px").css(animCss, -(curr*liSize));

        div.css(sizeCss, divSize+"px");                     // Width of the DIV. length of visible images

//бла-бла...

function css(el, prop) {
    return parseInt($.css(el[0], prop)) || 0;
};
function width(el) {
    return  el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight');
};
function height(el) {
    return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom');
};

})(jQuery);


P.S. Не знаю кстати, в этом куске представлены типичные для JS значения или что-то сделано посредством библиотеки (всё-таки jQuery подключен).
Ответить с цитированием