我有一个包含 5 个缩略图和一个较大图像的画廊。我将 jqZoom 绑定(bind)到大图像，因此当您将鼠标悬停在它上面时，您可以看到放大的版本。
当用户单击备用缩略图时，我遇到了问题。我可以更改更大的图像，但放大的图像仍然是原始图像。我无法让 jqZoom 更改放大的图像以匹配缩略图。
这是我正在尝试做的一个例子。您单击文本，缩略图会发生变化，但较大的 jqZoom 图像保持不变。如何更改此设置以便 jqZoom 在缩放区域中加载新图像？
<script type="text/javascript">
$(function() {
var options = {
zoomWidth: 250,
zoomHeight: 250,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100
};
$(".jqzoom").jqzoom(options);
});
function changeImgSrc() {
document.getElementById('bigImage').src = '4.jpg';
document.getElementById('smallImage').src = '3.jpg';
var options = {
zoomWidth: 400,
zoomHeight: 400,
showEffect: 'fadein',
hideEffect: 'fadeout',
fadeinSpeed: 'fast',
fadeoutSpeed: 'fast',
showPreload: true,
title: false,
xOffset: 100,
containerImgSmall: '3.jpg',
containerImgLarge: '4.jpg'
};
$(".jqzoom").jqzoom(options);
}
</script>
</head>
<body>
<div id="content" style="margin-top:100px;margin-left:100px;">
<a id="bigImage" href="2.jpg" class="jqzoom" style="" title="Product Zoom">
<img id="smallImage" src="1.jpg" title="Product Zoom" style="border: 0px none;">
</a></select>
<br>
<div id="img" onClick="document.getElementById('bigImage').src = '4.jpg';changeImgSrc();">click here to change source</div>
</div>
谢谢你的帮助!!
最佳答案
一种简单的方法是在图像更改时取消绑定(bind) jqZoom，然后在更改主图片的来源后重新绑定(bind)它
var jqzoomOptions = {
zoomWidth: 438,
zoomHeight: 390,
title: false
}
$("#mainPic").jqzoom(jqzoomOptions);
/* image thumbs */
$("#productPicThumbs a").click(function(){
// change pic source here
$("#mainPic").unbind();
$("#mainPic").jqzoom(jqzoomOptions);
return false;
});
关于image-manipulation - jqZoom 更改图片来源，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2050246/