Можно ли как-нибудь в фильтр по значению атрибута src занести переменную:
$('.big-img img[src = 'переменная']')
Я пытаюсь сделать слайдер в котором слайды переключаются путем клика по миниатюре, завернутой в ссылку на большую картинку путем изменения z-index у картинок (одна перекрывает другую поочередно). Для этого выбираю картинку у которой src соответствует href ссылки с миниатюрой. href заношу в переменную и подставляю на место значения атрибута в фильтре выборки. Но падла не работает.
Код ниже, также прикрепил к теме архив с версткой и скриптом там наглядно все видно.
$(document).ready(function() {
$('.mini-images a').click(function(eventObgect) {
/*в переменную hreflink заносим значение атрибута href ссылки с миникартинкой, по которой кликнули
в переменную zind заносим значение свойства z-index большой картинки, у которой атрибут src равен переменной hreflink. Не работает
сука. когда хрефлинк в кавычки заношу ошибка получается*/
var hreflink = $(this).attr('href');
var zind = $('.big-img img[src = hreflink]').css('z-index');
/*для большой картинки, у которой атрибут src равен переменной hreflink увеличиваем значение z-index. Тоже не работает*/
$('.big-img img[src = hreflink]').css('z-index',zind + 1);
eventObgect.preventDefault();
});
});
Верстка:
<div class="slaider">
<div class="big-img">
<img src="images/tachka1.jpg" alt="tachka1" title="tachka"/>
<img src="images/tachka2.jpg" alt="tachka1" title="tachka"/>
<img src="images/tachka3.jpg" alt="tachka1" title="tachka"/>
</div>
<div class="mini-images">
<div class="prev-img"><a href="images/tachka1.jpg"><img src="images/tachka1mini.jpg" alt="tachka1" title="tachka"/></a></div>
<div class="prev-img"><a href="images/tachka2.jpg"><img src="images/tachka2mini.jpg" alt="tachka2" title="tachka2"/></a></div>
<div class="prev-img"><a href="images/tachka3.jpg"><img src="images/tachka3mini.jpg" alt="tachka3" title="tachka3"/></a></div>
</div>
</div>
стили
.big-img{
background: url(../images/loading_100x100.gif) center 150px no-repeat;
height: 350px;
}
.big-img img{
position: absolute;
z-index: 1;
}
.big-img, .big-img img{
width: 456px;
}
.prev-img{
position: relative;
float: left;
display: block;
width: 150px;
height: 113px;
border: 1px solid #0F0;
}
