Показать сообщение отдельно
  #1 (permalink)  
Старый 28.06.2014, 21:25
Новичок на форуме
Отправить личное сообщение для tanto39 Посмотреть профиль Найти все сообщения от tanto39
 
Регистрация: 28.06.2014
Сообщений: 9

Как в фильтр выборки по атрибуту занести переменную?
Можно ли как-нибудь в фильтр по значению атрибута 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;
}

Вложения:
Тип файла: zip Слайдер jq.zip (267.6 Кб, 0 просмотров)
Ответить с цитированием