Оп-па! А вот этого я не предусмотрел!..
Тестил карусель только на картинках с вертикальной ориентацией, а если в списке есть альбомная - всё идёт через ж..!
Поля (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 подключен).
чтобы получить его знания и силу?
