Question

我有一个包含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>

感谢您的帮助!!

Answer 1

一种简单的方法是在图像发生变化时取消绑定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;
});

Answer 2

我和你有类似的问题...... 我从该网站获得了重要提示，请检查一下...... http://paul.leafish.co.uk/articles/drupal/quick_and_dirty_jqzoom_with_drupal_ecommerce_and_imagecache

Answer 3

旧但很好的js插件。

我用jQuery解决了这个问题，改变了图片源的jqimg属性：

$("#foto_produto").attr("jqimg", "domain-url.com/sample3.jpg");

以下内容：

<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample2.jpg" alt="domain-url.com/sample1.jpg">

最后获得：

<img src="domain-url.com/sample1.jpg" class="jqzoom" jqimg="domain-url.com/sample3.jpg" alt="domain-url.com/sample1.jpg">

您还可以应用jQuery“attr”函数来更改该div的“src”和“alt”。

Answer 4

这是您从jqzoom清除数据的方法：

$('.jqclass').removeData('jqzoom');

因为jqzoom会将数据保留在此对象中：

$(el).data("jqzoom", obj);

Answer 5

删除主图像并重新附加它应该使它工作，这是一个例子

$('a.main_thumb').jqzoom({ title: false });

    $("a.thumb").click(function (e) {
        e.preventDefault();
        var thumbUrl = $(this).attr("href");
        var thumbImg = $(this).find("img").attr("data-img");

        $(".main_thumb").remove();
        $(".current_thumbnail").append("<a href='" + thumbUrl + "' class='main_thumb'><img src='" + thumbImg + "' /></a>");

        $('a.main_thumb').jqzoom({ title: false });
    });

Answer 6

使用最新版本的jQZoom，您可以创建图库（jQZoom可以为您管理）。

1.将图库ID附加到主锚“rel”属性。

<a href="images/big-1.jpg" class="zoom" rel="gallery-1">
    <img src="images/small-1.jpg" />
</a>

2.管理缩略图“class”和“rel”属性。

班级zoomThumbActive由jQZoom附加到您的缩略图。默认情况下，将此类指定为所选缩略图（它应与主锚元素中的图像相同）

<ul>
    <li>
        <a class="zoomThumbActive" href="javascript:void(0);" rel="{
            gallery: 'gallery-1', 
            smallimage: 'images/small-1.jpg', 
            largeimage: 'images/big-1.jpg'
        }">
            <img src="images/thumbnail-1.jpg">
        </a>
     </li>
    <li>
        <a href="javascript:void(0);" rel="{
            gallery: 'gallery-1', 
            smallimage: 'images/small-2.jpg', 
            largeimage: 'images/big-2.jpg'
        }">
            <img src="images/thumbnail-2.jpg">
        </a>
     </li>
     <li>
         <!-- ... -->
     </li>
</ul>

缩略图rel属性的结构非常重要。

基本要素是：

图库：它所属图库的ID
smallimage ：小图片的路径（点击时加载 thumbnail），
largeimage ：大图片的路径。

jqZoom更改图像源

6 个答案:

1.将图库ID附加到主锚“rel”属性。

2.管理缩略图“class”和“rel”属性。