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

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



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



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



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

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



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

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



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



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



Заранее большущее спасибо!
  • Вопрос задан
  • 53242 просмотра
Пригласить эксперта
Ответы на вопрос 7
taliban
@taliban
php программист
Например вот так:

<img src="files/img/X.jpg" data-full="files/img/full/X.jpg">
...
$('img').each( function(){ this.src = this.getAttribute('data-full'); } );
Ответ написан
@Zamorozka
У вас должен быть прописан класс для img.
Например:

Далее добавляете event для этого класса, где меняете src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}
Ответ написан
Troytft
@Troytft
$('img').each( function(){$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/')); })
Не тестил
Ответ написан
@Apx
Java/JavaEE/Javascript developer
как альтернативный вариант можно рендерить страницу сразу с обоими изображениями. У них цсс классы превью и фулл. Фулл класс по дефолту скрыт. По клику просто меняем видимость соотв. тегов изображения. На загрузке страницы вроде не должно сказываться. Если элемент скрыт в цсс свойствах то в рендере он не учавствует. И изображение сразу не подгружается. В последнем не уверен но помоему нет. (наверно не загружаются потому что в форумах при открытии спойлера с картинкой начинает медленно прорисовываться картинка).
Просто менять аттрибут срц мне кажется слегка некорректным. Все же как никак основной аттрибут тега. Не уверен что некоторые браузеры адекватно обработают замену срц аттрибута
Ответ написан
Troytft
@Troytft
$('img').click(function () {
$(this).attr('src', $(this).attr('src').replace('img/', 'img/full/'));
});
Ответ написан
@Zamorozka
Сори, первый коммент не удачно написал…

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



Далее добавляете event для этого класса, где меняете src:
$('.my-img').click(function() {
$(this).attr('src', '...');
}
Ответ написан
Adiost
@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. Не работает, разумеется. Есть идеи?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы