Как сделать перекрашивание меню в зависимости от слайдера сзади?

Question

[danyfir]

Всем привет! Появилась такая проблема:
Есть сайт, header полностью прозрачный (с черными цветом текста), сзади слайдер (master slider) автоматически листает фон.
Если на слайдере темная картинка, соответственно, header перестает быть видимым (цвет текста совпадает с фоном слайдера).

Скажите, можно ли сделать так, чтобы при появлении определенных слайдов, текст окрашивался в белый?
P.S.: как только слайд появляется на экране, ему присваивается класс ms-sl-selected. Сами слайды постоянно подгружены и меняются с помощью обычно смены позиции (top:*****px;)
Пробовал делать так:

if ( $("#1slide").hasClass("ms-sl-selected") ) //я присвоил темному слайду id "1slide" и тут пытаюсь поймать когда к нему придет класс "ms-sl-selected". 
{
 $("#menu-aside-menu").removeClass(); //удалить из id менюшки все классы 
 $("#menu-aside-menu").addClass('BeliyText'); //и вставить класс 'BeliyText' в котором уже заданы стили белого текста
}

Что делаю не так? И вообще, так будет работать динамически? Помогите решить проблему, пожалуйста

Comments

[kulaeff]

Если вы знаете изначально какие слайды темные и светлые, то ответ Ростислав Сергеевич вам подойдет. Если же изображения меняются динамически, то нужно заюзать какую-нить либу для работы с изображениями либо canvas.

Answer 1

[Stalker_RED]

slider.api.addEventListener(MSSliderEvent.CHANGE_START, function(){
    // срабатывает в начале смены слайда
    // здесь нужно определять темный или не очень
    // и менять класс
});

docs.averta.net/display/MSJQ/Slider+API

Функцию по вычислению яркости можно взять здесь https://stackoverflow.com/questions/13762864/image...

Считать яркость лучше один раз, перед первым показом слайда, затем запомнить яркость каждого слайда.

Answer 2

[Ростислав Сергеевич]

Берёте индекс активного слайда (0, 1, 2, 3) из массива таковых, затем ставите конструкцию switch(можно много if, но это будет выглядеть не эстетично), и, согласно тому, какой слайд активен, меняете цвет текста. Естественно, это всё нужно положить в setTimeot, время в котором выставляете аналогичное интервалу смены слайдов.

ЗЫ: Если не поняли, могу накидать код.

UPD (Накидал код):

var element = document.querySelector('.element'); // Элемент, для которого и будем менять цвет в соответствии с активным слайдом (таких элементов может быть неограниченное количество)

setTimeout(function() {
	var slide = document.querySelector('.slide.active'); // Поиск активного слайда по классу .active

	if (slide.classList.contains('black')) {
		element.classList.remove('black'); // Удаляем класс чёрного цвета для элемента
		element.classList.add('white'); // Добавляем класс белого цвета для элемента
	} else {
			element.classList.remove('white');
			element.classList.add('black');
		}
}, 1000); // Вместо "1000" нужно указать интервал смены слайдов

Оказывается, массив и конструкция switch здесь совсем не нужны.

Comments

[kulaeff]

А как узнать какой из слайдов темный, а какой - светлый, в случае если изображения меняются динамически?

[danyfir]

kulaeff: ну для каждого условия отдельную стилистику, как мне кажется

[danyfir]

Да, Ростислав Сергеевич , неплохо было бы, если бы накидали)) Просто с масивами вообще не дружу

[Ростислав Сергеевич]

kulaeff: предполагается, что вы знаете это. Просто прописываете в условиях switch, непосредственно, условия, соответствующие цвету текущего слайда.

ЗЫ: Это ответ к вашему первому комменту.

[kulaeff]

danyfir: не понял. Что есть условия и стилистика? Если слайдер всегда будет с одними и теми же изображениями, ну или будет меняться очень редко, то тут все просто, да.

[kulaeff]

Ростислав Сергеевич: вопрос задавал не я )

[Ростислав Сергеевич]

kulaeff: хорошо. Тогда просто нужно указывать у слайдов, при добавлении, class, соответствующий стилистике слайда. Затем в switch'e проверять наличие того или иного класса.

[Stalker_RED]

Почему setTimeout? Что мешает подписаться на событие смены слайда?

[kulaeff]

Ростислав Сергеевич: для этого в админке или где у него там добавляются картинки в слайдер, нужно предусмотреть такое поле. Плюс такое поле нужно предусмотреть в БД. Даже если слайды добавляются прямо в HTML, то все равно, нужно помнить об этом и не забывать добавлять соответствующий класс. И вообще, взваливать на человека, добавляющего слайды, лишнюю работу, как то так себе. Да, в качестве одного из вариантов годится, но я бы не стал так делать. ИМХО.

[Ростислав Сергеевич]

kulaeff: так напиши, как бы ты стал делать.

[Ростислав Сергеевич]

Stalker_RED: да, точно. Не дошло сразу. Причём так даже правильнее будет, ибо из-за какого-нибудь пролагивания сайта, setTimeout может не попасть в нужный интервал.

[kulaeff]

Ростислав Сергеевич: дак я написал ему.