我的JavaScript在这里有问题。首先,如果我单击图像,它将缩放图像。问题是当图像更改为另一个图像并单击时,它仍会缩放第一个图像,而不是新图像。
我的html(用于显示图像和缩放图像的容器)
<div class="col-md-8">
<span id='ex3' class="zoom">
<img class="img-responsive" id="myImage" width='750' height='550' src="<?php echo "./image/product/p1/". $row['item_image']. ".jpg"; ?>">
</span>
</div>
我的html(我要单击并缩放的下一张图片)
<div class="col-sm-3 col-xs-6">
<a href="#">
<img class="img-responsive portfolio-item subimage" onclick="changeImage1(); <?php $show1="./image/product/p1/". $row['item_image']. ".jpg"; ?>" src="<?php echo "./image/product/p1/". $row['item_image']. ".jpg"; ?>" alt="">
</a>
</div>
我的Java代码在body标签中
function changeImage1() {
var image = document.getElementById('myImage');
var submage = document.getElementsByClassName('subimage')[1].src;
image.src= submage;
}
我的javascript头部标签(缩放功能)
jQuery(document).ready(function($){
$('#ex3').zoom({ on:'click' });
});
如何解决它,有什么想法吗?谢谢。
最佳答案
在下一个图像中,您将丢失id =“ ex3”。单击html放大。
尝试这样的事情:
jQuery(document).ready(function($){
$('img').zoom({ on:'click' });
});
关于javascript - 更改图像src值后,javascript缩放默认图像,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/37762202/