Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Как в фильтр выборки по атрибуту занести переменную? (https://javascript.ru/forum/jquery/48305-kak-v-filtr-vyborki-po-atributu-zanesti-peremennuyu.html)

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

:help: :help: :help: :help: :help:

dwarf 28.06.2014 22:06 
$(document).ready(function() {
    $('.mini-images a').click(function(eventObject) {
        var hrefLink = $(this).attr('href');
        var bigImg = $('.big-img img').attr('src', hrefLink);
        bigImg.css('z-index', $('.big-img img').css('z-index')+1);
        eventObject.preventDefault();
    });
});

dwarf 28.06.2014 22:11
И вообще ... что вы за галерею делаете....может готовый плагин использовать ?

tanto39 28.06.2014 22:13
Спасибо братан

tanto39 28.06.2014 22:26
Не чувак, хочу разобраться и чтоб кода немного было. Нахер плагины.
Только вопрос - в этом скрипте он не станет ли каждый раз по новому картинку подгружать, а то там каждый раз src меняется? Я z-index для того и меняю, чтобы не доставал каждый раз картинки с сервера, а сразу все загрузил и просто их поверх друг друга показывал.

tanto39 28.06.2014 23:28
dwarf,
Бро, твой вариант не подходит - тут просто меняется атрибут src сразу у всех больших картинок. Каждый раз заново грузятся. Не то.

рони 29.06.2014 00:33
tanto39,:cray: 
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
 .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;
 }

  </style>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.1.0.js'></script>
<script>

$(function() {
    var a = $('.mini-images a'), bigImg = $('.big-img img'), indx = 0;
    a.click(function(event) {
        var indx = a.index(this)
        bigImg.css({'z-index': '-1'} ).eq(indx).css({'z-index': '10'} );
        event.preventDefault();
    }).eq(indx).click();
});

</script>
</head>

<body>
<div class="slaider">
 <div class="big-img">
 <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-lg.jpg" alt="tachka1" title="tachka"/>
 <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-lg.jpg" alt="tachka1" title="tachka"/>
 <img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-lg.jpg" alt="tachka1" title="tachka"/>
 </div>
 <div class="mini-images">
 <div class="prev-img"><a href="images/tachka1.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img5-thumb.jpg" alt="tachka1" title="tachka"/></a></div>
 <div class="prev-img"><a href="images/tachka2.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img4-thumb.jpg" alt="tachka2" title="tachka2"/></a></div>
 <div class="prev-img"><a href="images/tachka3.jpg"><img src="http://learn.javascript.ru/files/tutorial/browser/events/gallery/img3-thumb.jpg" alt="tachka3" title="tachka3"/></a></div>
 </div>
 </div>




</body>

</html>

tanto39 29.06.2014 01:28
рони,
Это круто, конечно. Я так понял, что он ищет совпадение индекса нажатой ссылки с индексом большой картинки, но не совсем понятно, зачем в конце после всего еще это:

}).eq(indx).click();

И без этого работает, не понимаю что это, зачем

рони 29.06.2014 01:38
Цитата:
Сообщение от tanto39
И без этого работает, не понимаю что это, зачем
повышает индекс 1 картинки -- вместо css можно удалять ставить класс или использовать для картинки поумолчанию задав в строке 34 нужный номер в indx

tanto39 29.06.2014 01:53
рони,
Ну ты мозг, мужик, спасибо
А я через first-of-type делал в css


Часовой пояс GMT +3, время: 14:14.