Замена параметров картинки по клику

[maxxux]

<script type="text/javascript">
  function setBigImage(foto) {
    document.getElementById("bigimg").src = foto.src;
  }
</script>
<p style="text-align: center;">
<img id="bigimg"  data-original="big_1.jpg" src="1.jpg" height="150" alt="Главное изображение" />
</p>
<img  data-original="big_1.jpg" src="1.jpg" onclick="setBigImage(this)" />
<img  data-original="big_2.jpg" src="2.jpg" onclick="setBigImage(this)" />
<img  data-original="big_3.jpg" src="3.jpg" onclick="setBigImage(this)" />

Расскажите пожалуйста, и покажите, как при помощи функции setBigImage передать главному изображению не только значение src, но и значение data-original?

[elnoro]

document.getElementById("bigimg").setAttribute('data-original', foto.getAttribute('data-original'));

http://javascript.ru/tutorial/dom/at...s#dom-atributy

[bes]

c jquery можно ещё через data()

<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<button data-original="my data" onclick="
		alert(this.getAttribute('data-original'));
		alert($(this).attr('data-original')); 
		alert($(this).data('original')); 
		
">click</button>

[maxxux]

document.getElementById("bigimg").setAttribute('data-original', foto.getAttribute('data-original'));

У меня так не заработало. Вот посмотрите пожалуйста пример. data-original не подставляется при клике. Может я что-то не правильно объяснил, или не так сделал?

[vadim5june]

У меня так не заработало. Вот посмотрите пожалуйста пример. data-original не подставляется при клике. Может я что-то не правильно объяснил, или не так сделал?

Почему Вы решили что не подставляется?

[maxxux]

Почему Вы решили что не подставляется?

А Вы смотрели пример? При наведении на "главное" изображение подгружается большая картинка из data-original и выводится с эффектом лупы. Если выбрать розовый кед, то увеличенная фотка при наведении остается синей. Отсюда я делаю вывод, что не подставляется

[vadim5june]

в конце функции выведите alert(el.outerHTML);
и посмотрите-все подставляется
я в отладчике хрома вижу что меняется

[ruslan_mart]

Так там не src изображения нужно заменять, а background у div.thejloupeview

function setBigImage(foto){
    $('.thejloupeview').css('backgroundImage', 'url('+foto.getAttribute('data-original')+')');
}

[maxxux]

в конце функции выведите alert(el.outerHTML);
и посмотрите-все подставляется
я в отладчике хрома вижу что меняется

Сэр vadim5june, я признателен Вам за внимание оказанное к моей теме и время потраченное к моей проблеме, но мы с Вами кажется говорим на разных языках. Что такое отладчик хрома я не знаю (есть подозрения, что это консоль яваскрипт, или инструменты разработчика). Указав в функции alert(el.outerHTML); как Вы и сказали, я нигде ничего не увидел. Может на каком-то уровне что-то и подставляется, однако визуально ничего не работает. Я верю в первую очередь своим глазам и рядовой пользователь на сайте никаких отладчиков не использует - он кликает по ссылкам и смотрит картинки
Мне кажется, что своим ответом Вы просто глумитесь надо мной, прошу не делать этого. Ведь Вы же прекрасно понимаете чего я хочу добиться от этих картинок, и если у Вас есть желание и возможность помочь мне, то просто сделайте это и я буду благодарен.

function setBigImage(foto){
    $('.thejloupeview').css('backgroundImage', 'url('+foto.getAttribute('data-original')+')');
}

Может я что-то не понимаю, но функция setBigImage(foto) по клику на превью фотки берет значение src и подставляет вместо src "главного изображения", которое с id="bigimg". Без него не будет происходить смена картинки по клику, в принципе чего и не происходит в Вашем примере. А уже сам скрипт jloupe.js (сторонний) берет значение data-original и загружает его при наведении мыши с эффектом лупы. Так что там нужно заменять и src и data-original.

[bes]

и если у Вас есть желание и возможность помочь мне, то просто сделайте это и я буду благодарен.

сдаётся мне благодарность тебе не доступна