Блог Александра Башкирова

ИТ и бизнес, компьютеры и ПО, фото, программирование и просто мысли…
Этот сайт в основном посвящен тому, что мне интересно вне работы. Ведется в порядке хобби.
Все изложенное на сайте - мое частное оценочное мнение и не может быть истолковано иначе.
Со всеми вытекающими из этого последствиями.

Про патч ротатора (карусели) в MaxSite 0.96

Просмотров: 1633Комментарии: 0
MaxSite

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

Оставьте комментарий!


Комментарий будет опубликован после проверки

     

  

(обязательно)