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

[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/attributes#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'));



У меня так не заработало. Вот посмотрите пожалуйста пример (http://bank.ucoz.ru/photo.html). data-original не подставляется при клике. Может я что-то не правильно объяснил, или не так сделал?

[vadim5june]

У меня так не заработало. Вот посмотрите пожалуйста пример (http://bank.ucoz.ru/photo.html). 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); как Вы и сказали, я нигде ничего не увидел. Может на каком-то уровне что-то и подставляется, однако визуально ничего не работает. Я верю в первую очередь своим глазам и рядовой пользователь на сайте никаких отладчиков не использует - он кликает по ссылкам и смотрит картинки:)
Мне кажется, что своим ответом Вы просто глумитесь надо мной, прошу не делать этого. Ведь Вы же прекрасно понимаете чего я хочу добиться от этих картинок, и если у Вас есть желание и возможность помочь мне, то просто сделайте это и я буду благодарен.Так там не src изображения нужно заменять, а background у div.thejloupeview :)

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]

http://s2.ipicture.ru/uploads/20130526/vcBZT176.png

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

[vadim5june]

Мне кажется, что своим ответом Вы просто глумитесь надо мной, прошу не делать этого
оригинальное у Вас представление но неверное-
я вижу у себя в хроме во первых что data-original меняется как Вы и хотели но лупа работает неправильно
в принципе ничего удивительного берет старые данные
поэтому с моей точки зрения надо разбираться с прогой jloupe.js
если у Вас фарефокс то там outerHTML не работает выведите alert(el.getAttribute('data-original'));
bes в предыдущем посте как раз показал отладчик хрома-и там видно что все меняется-

[maxxux]

Да, теперь все понятно стало, буду думать над альтернативными вариантами. Всем спасибо за терпение и потраченное время.

[рони]

maxxux,
Вариант решения ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><META content="IE=5.0000" http-equiv="X-UA-Compatible">

<META content="text/html; charset=utf-8" http-equiv=Content-Type>
<SCRIPT type=text/javascript src="http://bank.ucoz.ru/jquery.js"></SCRIPT>
<SCRIPT type=text/javascript src="http://bank.ucoz.ru/jloupe.js"></SCRIPT>
<SCRIPT type=text/javascript>
function setBigImage(foto) {
var foto = $(foto);
var s = $("<img />").attr("src", foto.data('original'));
$("#bigimg").attr("src",foto.attr("src")).data("zoom", s);
}
</SCRIPT>
</HEAD>
<BODY>
<P style="TEXT-ALIGN: center"><IMG id=bigimg class=jLoupe
alt="Главное изображение" src="http://bank.ucoz.ru/s/1/1.jpg" height=150
data-original="http://bank.ucoz.ru/b/1/1.jpg"> <BR><IMG onclick=setBigImage(this)
src="http://bank.ucoz.ru/s/1/1.jpg" width=100 data-original="http://bank.ucoz.ru/b/1/1.jpg"> <IMG
onclick=setBigImage(this) src="http://bank.ucoz.ru/s/1/2.jpg" width=100
data-original="http://bank.ucoz.ru/b/1/2.jpg"> <IMG onclick=setBigImage(this)
src="http://bank.ucoz.ru/s/1/3.jpg" width=100 data-original="http://bank.ucoz.ru/b/1/3.jpg"> </P></BODY></HTML>