提前感谢。请帮助我找出我的问题。我有一个缩略图列表,当选择特定图像时,它会作为主图像进入。当主图像悬停时,缩放应该可以工作。缩放实际上效果很好。我的问题是缩放的图像不是我选择的相应图像。它总是只缩放我设置为默认值的图像。请帮助我想出一个解决方案。
网页代码
<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);
});
小提琴
纯洁享受
$('#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..