javascript - 关联图片未放大缩略图列表

提前致谢。请帮助我找出我的问题。
我有一个缩略图列表，在其中选择了特定图像后，它将作为主图像进入。当主图像悬停时，变焦应该可以正常工作。变焦实际上是完美的。我的问题是变焦的图像不是我选择的对应图像。它总是只变焦我设置为默认的图像。请帮我提出解决方案。

HTML代码

<span class='zoom' id='ex1'>
<div  class="prdmainimg"><img id="imgDisp"   src="loom-admin/image/products/<?php echo $image[0];?>" height="495" width="310"/></div>
            </span>
<div class="prdsubcnt" >
<div  class="prdsubcl1"><img  src="loom-admin/image/products/<?php echo $image[1]; ?>" width="65" height="100" onClick="changeImage('loom-admin/image/products/<?php echo $image[1]; ?>')"    /></div>
<div class="prdsubcl1"><img src="loom-admin/image/products/<?php echo $image[2]; ?>" width="65" height="100"
onClick="changeImage('loom-admin/image/products/<?php echo $image[2]; ?>'); "/> </div>
<div class="prdsubcl1"><img src="loom-admin/image/products/<?php echo $image[3]; ?>" width="65" height="100"
onClick="changeImage('loom-admin/image/products/<?php echo $image[3]; ?>')" /></div>
<div class="prdsubcl1"><img src="loom-admin/image/products/<?php echo $image[0]; ?>" width="65" height="100"
onClick="changeImage('loom-admin/image/products/<?php echo $image[0]; ?>'); "/> </div>
</div>

</div>

Java脚本

function changeImage(imgName)
{
  image = document.getElementById('imgDisp');
  image.src = imgName;
}

最佳答案

除了使用onclick函数，您还可以使用以下代码执行您的任务。

$('.prdsubcl1 img').on('click',function(){
var src = $(this).attr('src');
$('#imgDisp').attr('src', src);
});

Fiddle

PureJs享受

$('#imgDisp').click(function() {$('#ex1').zoom(); }); this the ur zoom code isn't it use the same code should zoom...i could'nt able to add in fiddle but should work..