Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Скрипт для смены изображения (https://javascript.ru/forum/misc/75118-skript-dlya-smeny-izobrazheniya.html)

blazer-05 04.09.2018 11:29

Скрипт для смены изображения
 
Здравствуйте.
Подскажите простой скрипт, который будет менять изображения в карточке товара.
https://ibb.co/jGsGqK
При клики по маленькой картинке она должна отображаться в основном окне т.е. в большом.
Сейчас в коде это примерно так выглядит

<!-- Product = display-1-1 -->
<div role="tabpanel" class="tab-pane fade in active" id="display-1">
	<div class="row">
		<div class="col-xs-12">
			<div class="toch-photo">
				<a href="#"><img src="{% static 'shop/img/toch/1.jpg' %}" data-imagezoom="true" alt="#" /></a>
                        </div>
	        </div>
	</div>
</div>
<!-- End Product = display-1-1 -->

<div class="toch-prond-menu">
	<ul role="tablist">
		<li role="presentation" class=" active"><a href="#display-1" role="tab" data-toggle="tab"><img src="{% static 'shop/img/toch/1.jpg' %}" alt="#" /></a></li>
	</ul>
</div>

жесткая привязка по id="display-1" на "#display-1"

Лоэнрон 04.09.2018 11:40

могу что-то примерно такое подсказать:

на <a> вешаешь обработчик onclick = "changeIMG('/новый адрес для картинки/')"
var img = document.getElementById("display-1").getElementsByTagName("img")[0]; //получаем большую картинку.

function changeIMG(str){
  img.setAttribute('src', str);
}

blazer-05 04.09.2018 12:20

Спасибо, получилось!


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