Как сделать смену картинки при клике?

Question

[blazer05]

Здравствуйте.

Есть основная картинка под ней дополнительные, как сделать, чтоб при клике на дополнительную она отображалась на главной? Сейчас доп.кртинки привязаны жестко по id в шаблоне id="display-1" на a href="#display-1"
Я так понимаю это нужно ява скриптом делать?

<div class="col-md-5 col-sm-5 col-xs-12">
									<div class="clear"></div>
									<div class="tab-content">
										<!-- 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="{{ product.images.url }}" data-imagezoom="true" alt="#" /></a>
													</div>
												</div>
											</div>
										</div>
										<!-- End Product = display-1-1 -->
									</div>
									<!-- Start Toch-prond-Menu -->
                                    {% for albom in albom %}
									<div class="toch-prond-menu">
										<ul role="tablist">
											<li role="presentation" class=" active"><a href="#display-1" role="tab" data-toggle="tab"><img src="{{ albom.image.url }}" alt="#" /></a></li>
										</ul>
									</div>
                                    {% endfor %}
									<!-- End Toch-prond-Menu -->
								</div>

Answer 1

[Mikhail Osher]

Вот есть "готовое" решение. kenwheeler.github.io/slick

Примените его, сами велосипед не пишите. Однако настоятельно рекомендую ознакомиться с исходным кодом, чтобы понимать, как подобные вещи пишутся.

Comments

[blazer05]

Спасибо, пригодится. Решил по другому.

Answer 2

[blazer05]

Сам отвечу на свой вопрос, может кому то пригодится.
Подсказали на другом форуме. Можно сделать через этот яваскрипт

<script type="text/javascript">
 var img = document.getElementById("display-1").getElementsByTagName("img")[0]; //получаем большую картинку.
 function changeIMG(str){
    img.setAttribute('src', str);
 }
</script>

на <a> повесить обработчик onclick = "changeIMG('/новый адрес для картинки/')"

Все работает, картинки меняет так как нужно было.