Mik*_*ike 6 image-manipulation
我有一个包含5个缩略图和一个放大图像的图库.我将jqZoom绑定到大图像,因此当您将鼠标悬停在它上面时,您可以看到放大的版本.当用户点击备用缩略图时我遇到了麻烦.我可以更大的图像,但放大的图像仍然是原始图像.我无法让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>
谢谢你的帮助!!
小智 8
一种简单的方法是在图像改变时取消绑定jqZoom,然后在更改主图像源后重新绑定它
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;
});
小智 3
我和你有类似的问题...我从该网站得到了重要提示，请检查... http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache