Помогите пожалуйста решить такую проблему.
Вот тут на страничке товара когда кликаешь по фотографиям что слева они подставляются в большую, хочу сделать лупу при наведении на большое фото
Лупу я поставил, но при переходе на другие фото и при наведении увеличивает оно только фото что изначально было большим, не знаю как осуществить чтобы при переходе на новое фото увеличивалось именно то фото на которое нажали.
Сам скрипт лупы работает таким образом что в ссылке 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>