0

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

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

введите сюда описание изображения

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

Сам скрипт лупы работает таким образом что в ссылке 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>

1 ответ 1

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
  • секунду, сейчас перепроверю 4 июн 2018 в 20:38
  • посмотрите пожалуйста добавил код выше, я все достаю из бд, он немного другой, может ошибся когда при смене своего кода на ваш 4 июн 2018 в 20:40
  • @АлексейСоколов было бы хорошо, если бы скрипт лупы Вы тоже включили в вопрос
    – user176262
    4 июн 2018 в 20:47
  • а там файлы лупы подключаю что скачал с интернета, как я их сюда могу подключить ? могу я вам скинуть отдельно все файлы ? скачаете и посмотрите в файле article.php строка 105, как все устроено 4 июн 2018 в 20:49
  • @АлексейСоколов Нет, файл не надо. Все работает даже здесь, только нe по наведению, а по клику.
    – user176262
    4 июн 2018 в 20:51

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.