Для начала обозначу проблему, которую решал: сделать ротатор "красиво". В чем проблема? Во-первых, штатный ротатор прижимал картинку влево. Во-вторых, при смене картинок применялся эффект, но из-за какого-то неизвестного науке глюка картинки могли выглядывавть друг из-за друга какое-то время. Тогда (когда я обновлял сайт до 5ой версии) мне это казалось несущественно, впоследствии же начало раздражать. И вишенка на торте - у меня (так уж исторически сложилось) все миниатюры разного размера. От 120 до 220px по большей стороне. И в итоге могло получиться так, что часть сайдбара съезжала... Меня это тоже раздражало, но - традиционно было лень. В общем, все это я лечил при обновлении... вылечил так. Во-первых, в настройках виджета прописал что будет применен дополнительный класс image-correct ("Сайдбары и виджеты" - "Галерея" - там "Дополнит.Class", ну и туда) и alib-gal (о нем позднее, он нужен для ротатора).
Дальше - CSS обвязка для корректирующего класса:
.image-correct {
width: 260px;
text-align: center;
margin-top: 4px;
background-color: #fefefe;
min-height:180px;
height:180px;
}
.image-correct img {
max-height:180px;
}
.image-correct > a.lightbox {
line-height: 180px;
}
Css файл помещаем в /templates/alib/assets/css - после чего в системе у вас появится еще один css профиль, который необходимо подключить ("админка" - "шаблон" - "css профили"). Все, css у нас в системе... (правда, реализация странная - css просто подтягивается текстом в head - но не будем придираться, возможно, такое решение имело под собой определенные основания). В css понятное дело, мои значения. Для другой задачи они будут другими.
Примененный лайфхак решает задачи: выравнивания и заполнения картинкой отведенного места, но не решает "наезд" изображений.
Что же... лечим "наезд". Для этого - заходим в админку, идем в "сайдбары и виджеты", там - выбираем "Галерея", там вносим свои настройки (количество фото, галерея, там же наш css-класс должен находиться). И там (важно!) ставим два значения - "Режим отображения" = "Картинками" и "Сортировка" = "Случайно". Если сейчас посмотреть на галерею, то там бдут все картинки, которые выведены в галерею. Осталось за малым - применить javascript :) Идем в папку .templates/default/assets/js/autoload, куда помещаем jQuery плагин таймера (http://jchavannes.com/download/jquery-timer-demo.zip) и файл, который будет организовывать нам слайдер (название у него может быть любое, главное, чтобы расширение было .js):
$(document).ready(function() {
var width_fix = 200;
var img_count = $('.alib-gal > a').length;
var pred_mumber = 0;
var timer = $.timer(function() {
do
var number = Math.floor(Math.random() * img_count);
while (number==pred_mumber)
pred_mumber = number;
$(".alib-gal > a:visible").hide();
var el = $(".alib-gal > a:eq(" + number + ")");
el.show(4000);
alib_img_correct($(".alib-gal > a:eq(" + number + ") > img"));
});
timer.set({ time : 10000, autostart : true });
$('.alib-gal > a').not(':first').hide();
alib_img_correct($('.alib-gal > a:first > img'));
function alib_img_correct(ximg)
{ var iwidth = ximg.width();
var iheight = ximg.height();
if (iwidth < width_fix)
{ var ki = width_fix / iwidth;
if (iwidth > iheight)
{ ximg.width(width_fix);
ximg.height(iheight * ki);}}}
$(window).resize(function(){
$('.alib-gal > a').not(':first').hide();
$('.alib-gal > a:first').show();
alib_img_correct($('.alib-gal > a:first > img'));
timer.reset();
});
});
Собственно, всё. Если все сделано верно, то после перезагрузки сайта у нас не 10-20-30 картинок, а одна, сменяемая последующими друг за другом.
ПС. Данный способ в принципе не очень правильно называть "патчем" - всё сделано на штатных возможностях платформы с моим небольшим допилом (css и js)
