jqZoom更改图像源

发布于 2024-08-17 18:30:15 字数 1449 浏览 5 评论 0原文

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

感谢您的帮助！！

原文

I have a gallery of 5 thumbnails and one larger image. I have jqZoom tied to the large image so when you mouse over it, you can see a zoomed in version.
I'm having trouble when a user clicks an alternate thumbnail. I can get the larger image to change, but the zoomed in image remains the original image. I can't make jqZoom change the zoomed in image to match the thumbnail.
Here is an example of what I'm trying to do. You click on the text and the thumbnail changes, but the larger jqZoom image remains the same. How do I change this so that jqZoom loads the new image in the zoom area?

<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>

Thanks for your help!!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

静谧幽蓝 2024-08-24 18:30:15

一个简单的方法是每当图像发生变化时解除 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;
});

A simple way is to unbind the jqZoom whenever the image changes and then re-bind it once you've changed the source of your main pic

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;
});

回复收藏 0 原文

栀梦 2024-08-24 18:30:15

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

回复收藏 0 原文

留蓝 2024-08-24 18:30:15

老旧但很好的 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”。

Old but good js plugin.

I have solved this problem with jQuery, changing the jqimg attribute on the picture source:

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

On the following :

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

Finally obtaining:

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

You can also applies the jQuery "attr" function to change the "src" and "alt" of that div.

回复收藏 0 原文

话少情深 2024-08-24 18:30:15

这是清除 jqzoom 中的数据的方法：

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

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

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

This is how you can clean the data from jqzoom:

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

Because jqzoom keeps the data in this object:

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

回复收藏 0 原文

陌路终见情 2024-08-24 18:30:15

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

$('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 });
    });

Removing the main image and re-appending it should make it work, here is an example

$('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 });
    });

回复收藏 0 原文

漆黑的白昼 2024-08-24 18:30:15

使用最新版本的 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 属性的结构非常重要。

基本元素是：

gallery：它所属图库的 ID，
smallimage：小图像的路径（当您单击
缩略图），
largeimage：大图像的路径。

With the last version of jQZoom you can create galleries (jQZoom can manage it for you).

1.Attach the gallery ID to your main anchor "rel" attribute.

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

2.Manage your thumbnails "class" and "rel" attributes.

The class zoomThumbActive is attached to your thumbnails by jQZoom. By default specify this class to the selected thumbnail (it should be the same image in your main anchor element)

<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>

The structure of the thumbnail rel attribute is very important.

The base elements are :

gallery: the ID of the gallery to which it belongs,
smallimage: the path to the small image (loaded when you click on the
thumbnail),
largeimage: the path to the big image.

回复收藏 0 原文

~没有更多了~