Как затемнить изображение в слайдере?

Question

[nickostyle]

Вообщем пока не могу найти решения самостоятельно. Сразу попробовал сделать обычный блок с position: absolute, и opacity, перекрыл им слайдер, высоту отрегулировал через jquery. Но проблемка в том, что оверлей перекрывает и контролы слайдера, т.е. управлять им не получается. А мне нужно, чтобы затемнялось только изображение. Попробовал через jqeury добавить оверлей динамически, используя .before, но данный способ не срабатывает. Не знаю почему, но догадываюсь, что мой код выполняется раньше, чем код слайдера, и не находит нужный элемент, т.к. он еще не создан. Что делать, товарищи? Я новичок в jquery и все делаю тупо по официальной документации. Может есть еще какие то пути или методы?

upd: слайдер называется RevolutionSlider.

Код привести могу конечно, но не знаю какой именно. Вижу в коде полученной страницы блок с изображением, у него есть класс .tp_bgimg. Я пишу следующее:

$('.tp_bgimg').before('<div class="slider-area-overlay"></div>');

Ну и css стили для .slider-area-overlay, разумеется. После рефреша данный блок не появляется там, где я его ожидаю увидеть, хотя в другом месте страницы я пробовал - все работает. Поэтому предположение одно - код слайдера создает блок .tp_bgimg позже, чем выполняется мой код, и следовательно мой код не может найти данный блок, т.к. он в момент поиска еще не создан.

Вопрос решен. В слайдере есть функция создания оверлея, потом достаточно переназначить стили для данного оверлея. Подсказали знатоки данного слайдера.

Comments

[Евгений Петров]

Код на jsfiddle.net и поможем.

[nickostyle]

обновил вопрос

[teotlu]

Скажите хотя бы, что за слайдер. Иначе вообще ничего непонятно.

[nickostyle]

Revolution Slider

[Александр Лебедь]

В смысле затемнить? При наведении? Или как?

[nickostyle]

нет, изначально, чтобы изображения были затемнены.

Answer 1

[Дима Паутов]

я вам так скажу, не нужно делать никакой перекрывающий блок. Все очень просто!
Берете картинку и в css указываете ей прозрачность по вкусу, далее тому блоку, в котором лежит картинка, нужно задать черный фон! И эффект вас обрадует, картинка затемнена!

jsfiddle.net/3h2k9v1t/1

Comments

[nickostyle]

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

[nickostyle]

То есть сделать так, чтобы изображение было затемнено сразу можно только поместив над ним оверлей...Проблема в том, что я как раз-таки не могу этого сделать.

[Дима Паутов]

nickostyle: jsfiddle.net/3h2k9v1t/2

[nickostyle]

Дима Турков: аналогичный эффект...сначала картинка, через 1-2 секунды проявляются свойства css

[Дима Паутов]

nickostyle: Значит слайдер использует css трансформации. Можно ссылку на сайт?

[nickostyle]

Дима Турков: сайт на локале. На сайте слайдера (ссылка ниже) все точно так же.
themes.themepunch.com/?theme=revolution_wp

Answer 2

[Владимир Ио]

Вариант 1
Вешайте eventListener на событие, которое выполняется до вашего кода.
Например:

<button id="mybutton">Щелкните меня!</button>
<script>

var b = document.getElementById("mybutton");
b.onclick = function() {
	alert("Спасибо, что щелкнули на мне!"); 
};

b.addEventListener("click", function() {alert('Еще раз спасибо!')}, false); 
</script>

Тогда ваш сработает позже.

Вариант 2
Также попробуйте делать сначала проверку, если его нет то в рекурсию, т.к. jquery частенько проглатывает без ошибок:

function watch()
{
	if(document.getElementById('your_id') != null)
	{
		//применяем стиль
		return true;
	}
	else
	{
		//если нет такого, пробуем еще раз через пол секунды
		setTimeout(watch, 500);
		return false;
	}
}