Замена пути ссылки при клике

197

28 июня 2018, 01:10

Помогите пожалуйста решить такую проблему.

Вот тут на страничке товара когда кликаешь по фотографиям что слева они подставляются в большую, хочу сделать лупу при наведении на большое фото

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

Сам скрипт лупы работает таким образом что в ссылке href ставится фото для увеличения, при переходе на другие фото у меня заменяется в img путь, а надо сделать чтобы также заменялось и в href

.prev li { 
float: left; 
list-style-type: none; 
padding: 5px; 
margin: 10px; 
} 
 
img{	 
	border: none 
} 
h1{ 
	margin: 50px 0 50px 0; 
}.cloud-zoom{ 
	width: 200px; 
} 
.cloud-zoom-lens { 
	border: 4px solid #888; 
	margin: -4px; 
	background-color: #fff;	 
	cursor: move;		 
} 
.cloud-zoom-title { 
	font-family: Arial, Helvetica, sans-serif; 
	position: absolute !important; 
	background-color: #000; 
	color: #fff; 
	padding: 3px; 
	width: 100%; 
	text-align: center;	 
	font-weight: bold; 
	font-size: 10px; 
} 
.cloud-zoom-big { 
	border: 4px solid #ccc; 
	overflow: hidden; 
} 
.cloud-zoom-loading { 
	background:#222; 
	padding:3px; 
	border:1px solid #000; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script type="text/javascript" src="http://testing5543.mcdir.ru/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="http://testing5543.mcdir.ru/cloud-zoom.1.0.2.min.js"></script> 
   
 
<ul> 
  <div class="prev"> 
     <li> 
				<img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src" style="cursor: pointer; width:61px;height:91px;display:block;"> 
				<img class="hover-image" src="https://img2.goodfon.ru/original/600x1024/5/9c/alisa-devushka-krasivaya-volosy-745.jpg" onclick="document.getElementById('bg1').src=this.src" style="cursor: pointer; width:61px;height:91px;display:block;"> 
				<img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src" style="cursor: pointer; width:61px;height:91px;display:block;"> 
     </li> 
	</div> 
</ul> 
 
<div class="main-img-wrapper main-image-product-1113"> 
	<a class="main-image zoom-hover lightbox-img-src-1113 nut cloud-zoom" rel="position: 'inside', adjustX: 0, adjustY:0" href="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" style="position: relative; overflow: hidden;"> 
		<img id="bg1" class="img-changer-1113 main-img resized" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" width="323"> 
	</a>  
</div>

Answer 1

Добавьте назначение атрибута href родительского анкера в обработчики onclick:

onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src"

.prev li { 
  float: left; 
  list-style-type: none; 
  padding: 5px; 
  margin: 10px; 
}

<ul> 
  <div class="prev"> 
    <li> 
      <img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src" style="cursor: pointer; width:61px;height:91px;display:block;"> 
      <img class="hover-image" src="https://img2.goodfon.ru/original/600x1024/5/9c/alisa-devushka-krasivaya-volosy-745.jpg" onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src" style="cursor: pointer; width:61px;height:91px;display:block;"> 
      <img class="hover-image" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" onclick="document.getElementById('bg1').src=this.src;document.getElementById('bg1').parentNode.href=this.src" style="cursor: pointer; width:61px;height:91px;display:block;"> 
    </li> 
  </div> 
</ul> 
 
<div class="main-img-wrapper main-image-product-1113"> 
  <a class="main-image zoom-hover lightbox-img-src-1113 nut cloud-zoom" rel="position: 'inside', adjustX: 0, adjustY:0" href="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" style="position: relative; overflow: hidden;"> 
    <img id="bg1" class="img-changer-1113 main-img resized" src="https://undercoverofthenight.files.wordpress.com/2011/11/207530107_rollingstone-comnov12011_122_103lo-1.jpg" width="323"> 
  </a> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Dropdown menu без нажатия (hover dropdown)

Я смог сделать dropdown menu с помощью Bootstrap но никак не получается сделать hover dropdown (автоматический dropdown без нажатия)Как можно сделать это ? Желательно...

237

jQuery