Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 28.06.2014, 22:06
Интересующийся
Отправить личное сообщение для dwarf Посмотреть профиль Найти все сообщения от dwarf
 
Регистрация: 22.05.2014
Сообщений: 16

$(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:12.
Ответить с цитированием
  #3 (permalink)  
Старый 28.06.2014, 22:11
Интересующийся
Отправить личное сообщение для dwarf Посмотреть профиль Найти все сообщения от dwarf
 
Регистрация: 22.05.2014
Сообщений: 16

И вообще ... что вы за галерею делаете....может готовый плагин использовать ?
Ответить с цитированием
  #4 (permalink)  
Старый 28.06.2014, 22:13
Новичок на форуме
Отправить личное сообщение для tanto39 Посмотреть профиль Найти все сообщения от tanto39
 
Регистрация: 28.06.2014
Сообщений: 9

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

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

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

dwarf,
Бро, твой вариант не подходит - тут просто меняется атрибут src сразу у всех больших картинок. Каждый раз заново грузятся. Не то.
Ответить с цитированием
  #7 (permalink)  
Старый 29.06.2014, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

tanto39,
<!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>
Ответить с цитированием
  #8 (permalink)  
Старый 29.06.2014, 01:28
Новичок на форуме
Отправить личное сообщение для tanto39 Посмотреть профиль Найти все сообщения от tanto39
 
Регистрация: 28.06.2014
Сообщений: 9

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

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

И без этого работает, не понимаю что это, зачем
Ответить с цитированием
  #9 (permalink)  
Старый 29.06.2014, 01:38
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,053

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

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

рони,
Ну ты мозг, мужик, спасибо
А я через first-of-type делал в css
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как передать переменную из JS в PHP методом xhr.send() ? winston3d AJAX и COMET 5 09.02.2013 19:29
Flot Как передать переменную в функцию отрисовки точки на графике Ren jQuery 0 20.06.2012 14:16
Как сделать локальную переменную глобальной?? Дмитрий Общие вопросы Javascript 8 02.11.2010 03:33
Немогу взять id как переменную Влад Общие вопросы Javascript 2 08.07.2009 19:38
Как обозначить переменную выбранную в FileChooser? woo_hoo Общие вопросы Javascript 4 03.07.2008 12:58