Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Замена параметров картинки по клику (https://javascript.ru/forum/misc/38281-zamena-parametrov-kartinki-po-kliku.html)

maxxux 26.05.2013 04:30

Замена параметров картинки по клику
 
<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 26.05.2013 16:05

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


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

bes 26.05.2013 16:28

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 26.05.2013 17:45

Цитата:

Сообщение от elnoro (Сообщение 252859)
document.getElementById("bigimg").setAttribute('data-original', foto.getAttribute('data-original'));

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

vadim5june 26.05.2013 18:05

Цитата:

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

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

maxxux 26.05.2013 18:14

Цитата:

Сообщение от vadim5june (Сообщение 252886)
Почему Вы решили что не подставляется?

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

vadim5june 26.05.2013 18:17

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

ruslan_mart 26.05.2013 19:19

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

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

maxxux 26.05.2013 20:59

Цитата:

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

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

Сообщение от Ruslan_xDD (Сообщение 252904)
Так там не 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 26.05.2013 21:18



Цитата:

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

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


Часовой пояс GMT +3, время: 07:38.