Изменение атрибута src у изображений (jQuery)?

Question

[Adiost]

Добрый вечер.



Дана страница с кучей тамбнейлов картинок. На клик по любому из тамбнейлов нужно повесить функцию, меняющую src данного тамбнейла. Я могу написать отдельные функции для каждого отдельного изображения, но их десятки.



Немного подробнее:



Допустим есть огромное количество вот такой херни на странице, где X — переменная (формат файла так же варьируется).

img src="files/img/X.jpg"



На клик по любому из этих изображений в src должно подгрузиться другое значение:

img src="files/img/full/X.jpg"



Как реализовать? Если что, у каждого изображения свой уникальный атрибут ID.



Честно говоря, был бы несказанно рад уже готовой функции и инструкции по применению, так как с JS и jQ не дружу совершенно.



Заранее большущее спасибо!

Answer 1

[Zamorozka]

У вас должен быть прописан класс для img.
Например:

Далее добавляете event для этого класса, где меняете src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}

Answer 2

[Анатолий]

Например вот так:

<img src="files/img/X.jpg" data-full="files/img/full/X.jpg">
...
$('img').each( function(){ this.src = this.getAttribute('data-full'); } );

Comments

[Troytft]

Раз jQuery, так и использовали бы .attr('src', attr('data-full'))

[Adiost]

Использовал ваш код, не сработало :( По-моему должно быть упоминание onClick, нет? :)
И да, такой вариант был бы очень подходящим, ибо больше img на странице нету.

[Zamorozka]

>onClick

$('.my-img').click(function() {
$(this).attr('src', '...');
}

[Daess]

Используя data атрибуты и jQuery, можно переписать так:

$('img').each( function(){ $(this).attr('src', $(this).data('full')); } );

[Adiost]

Хммм… Вот такая фигня:
$(".thumb_img").click(function(){ this.src = this.getAttribute(«data-full»); } );
И она не работает. На клик ничего не происходит. Атрибут добавил.

[Анатолий]

jsfiddle.net/DBwzs/ Да, вы были правы, клик нужен, я прозевал =)

[Анатолий]

jsfiddle.net/DBwzs/1/ Даже вот так, ато один цикл лишний написал

[anton_trofimov95]

Анатолий, а как сделать, чтобы обратно при клике ( в моем случае при скролле) убирался класс и становилось исходным изображение

[Анатолий]

anton_trofimov95, сохранять в другой дата аттрибут что что заменяете

Answer 3

[Troytft]

$('img').each( function(){$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/')); })
Не тестил

Comments

[Дима]

Работает, спасибо!

Answer 4

[Олег Яковенко]

как альтернативный вариант можно рендерить страницу сразу с обоими изображениями. У них цсс классы превью и фулл. Фулл класс по дефолту скрыт. По клику просто меняем видимость соотв. тегов изображения. На загрузке страницы вроде не должно сказываться. Если элемент скрыт в цсс свойствах то в рендере он не учавствует. И изображение сразу не подгружается. В последнем не уверен но помоему нет. (наверно не загружаются потому что в форумах при открытии спойлера с картинкой начинает медленно прорисовываться картинка).
Просто менять аттрибут срц мне кажется слегка некорректным. Все же как никак основной аттрибут тега. Не уверен что некоторые браузеры адекватно обработают замену срц аттрибута

Comments

[Олег Яковенко]

Вернулся за комп, вот примерно как я бы сделал, чтобы по политкорректней было :)
pastebin.com/UBDVErU0

Answer 5

[Troytft]

$('img').click(function () {
$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/'));
});

Answer 6

[Zamorozka]

Сори, первый коммент не удачно написал…

У вас должен быть прописан класс для img.
Например:



Далее добавляете event для этого класса, где меняете src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}


Comments

[Zamorozka]

мда… и второй тоже)
просто img не эскейпится…

[Анатолий]

Зацените.
Пишем так:
<pre>
<img src=«habrahabr.ru/i/bg-multilogo.png»>
</pre>
И получится вот так:

<img src="http://habrahabr.ru/i/bg-multilogo.png">

И предпросмотр не забываем :)

Answer 7

[Adiost]

var toggle = 0;
$('.thumb_img').click(function() {
if(toggle == 1) {
$(this).attr('src', $(this).attr('src').replace('img/full/', 'img/'));
var toggle = 0;
} else {
$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/'));
var toggle = 1;
}
})


То, что вы видите — мои жалкие попытки сделать toggle. Не работает, разумеется. Есть идеи?

Comments

[Riateche]

В данном конкретном случае советую сделать проверку:
$(this).attr('src').indexOf('full') >= 0
Если это условие неверно (исходный url не содержит строки full), то надо выполнить первый replace, иначе надо выполнить второй.

[Олег Яковенко]

Ваша проверка тоже может крякнуть. Если у тамбнейла имя самого файла будет содержать слово full вы зайдёте не в ту ветку ифа, и скрипт сделает айайа