| bes | 26.05.2013 21:18 |
Цитата:
|
Сообщение от 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? |
document.getElementById("bigimg").setAttribute('data-original', foto.getAttribute('data-original'));
http://javascript.ru/tutorial/dom/at...s#dom-atributy |
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>
|
Цитата:
|
Цитата:
|
Цитата:
|
в конце функции выведите alert(el.outerHTML);
и посмотрите-все подставляется я в отладчике хрома вижу что меняется |
Так там не src изображения нужно заменять, а background у div.thejloupeview :)
function setBigImage(foto){
$('.thejloupeview').css('backgroundImage', 'url('+foto.getAttribute('data-original')+')');
}
|
Цитата:
Мне кажется, что своим ответом Вы просто глумитесь надо мной, прошу не делать этого. Ведь Вы же прекрасно понимаете чего я хочу добиться от этих картинок, и если у Вас есть желание и возможность помочь мне, то просто сделайте это и я буду благодарен. Цитата:
|
Цитата:
|
Цитата:
я вижу у себя в хроме во первых что data-original меняется как Вы и хотели но лупа работает неправильно в принципе ничего удивительного берет старые данные поэтому с моей точки зрения надо разбираться с прогой jloupe.js если у Вас фарефокс то там outerHTML не работает выведите alert(el.getAttribute('data-original')); bes в предыдущем посте как раз показал отладчик хрома-и там видно что все меняется- |
Да, теперь все понятно стало, буду думать над альтернативными вариантами. Всем спасибо за терпение и потраченное время.
|
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>
|
| Часовой пояс GMT +3, время: 16:43. |