Для начала обозначу проблему, которую решал: сделать ротатор "красиво". В чем проблема? Во-первых, штатный ротатор прижимал картинку влево. Во-вторых, при смене картинок применялся эффект, но из-за какого-то неизвестного науке глюка картинки могли выглядывавть друг из-за друга какое-то время. Тогда (когда я обновлял сайт до 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)