jquery - 如何根据图像宽度动态禁用cloudzoom

Question

我正在使用cloudzoom我有以下标记:

<div id="container">
  <img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoomImage: '/img-zoom/image1.jpg" />
  <div id="thumbnail-images">
    <img class='cloudzoom-gallery' src="/img/image2.jpg" data-cloudzoom="useZoom: '.cloudzoom', image: '/img/image2.jpg', zoomImage: '/img-zoom/image2.jpg'">
    <img class='cloudzoom-gallery' src="/img/image3.jpg" data-cloudzoom="useZoom: '.cloudzoom', image: '/img/image3.jpg', zoomImage: '/img-zoom/image3.jpg'">
  </div>
</div>

我使用此代码来初始化cloudzoom:

$('#container', context).once('initiateCloudzoom').each(function () {
    CloudZoom.quickStart();
});

这个实现工作正常，但我的问题是:

如果我的主图像宽度小于 X 像素，如何禁用 cloudzoom？

此外，如果当我单击其中一个缩略图时，一旦交换图像，如何根据相同的条件(图像宽度)禁用或启用 cloudzoom。

提前致谢。

Answer 1

将disableZoom值设置为auto。仅当缩放图像大小相同或小于小图像时才会禁用。请注意，如果您设置的放大级别大于 1，则不会禁用缩放。

 <div id="container">
  <img id="main-image" class="cloudzoom" src="/img/image1.jpg" data-cloudzoom="variableMagnification: false, zoomOffsetX: 0, zoomPosition: 'inside', zoomImage: '/img-zoom/image1.jpg'" />
  <div id="thumbnail-images">
    <img class='cloudzoom-gallery' src="/img/image2.jpg" data-cloudzoom="useZoom: '.cloudzoom', image: '/img/image2.jpg', zoomImage: '/img-zoom/image2.jpg', disableZoom:'auto'">
    <img class='cloudzoom-gallery' src="/img/image3.jpg" data-cloudzoom="useZoom: '.cloudzoom', image: '/img/image3.jpg', zoomImage: '/img-zoom/image3.jpg', disableZoom:'auto'">
  </div>
</div>