jquery - 在窗口大小更改时加载 CloudZoom

Question

我正在创建一个响应式网站，并且正在使用云缩放 v1.0.3，这是我所知道的我可以访问的最后一个免费版本。

为了显示云缩放，所需要做的就是引用 javascript 文件并添加嵌入到图像中的选项，如下所示:

<a href="http://kmage.net/js/cloud-zoom/example/pic01_big.jpg" id="zoom01" class="cloud-zoom" rel="position:'right', adjustX:20, adjustY:-3, tint:'#FFFFFF', softFocus:1, smoothMove:5, tintOpacity:0.8">
<img src="http://kmage.net/js/cloud-zoom/example/pic01.jpg" / width="300" height="400">

我的问题是，我需要在小于(在我的场景中)小于 768px 的窗口上将位置从右侧更改为内部。

为了完成大部分响应式交付加载，我有以下功能:

$(function() {
checkBrowserSize ();
setInterval('checkBrowserSize ()' , 0);
});

var windowSize = '';
var actualSize = 0;
var newWindowSize = 0;

function checkBrowserSize () {

windowWidth = window.outerWidth;
var contentWidth = $('body').width();
var sizeDiff = windowWidth - contentWidth;
actualSize = windowWidth - sizeDiff;

if (actualSize > 1200) { newWindowSize = 'lg'; }
if (actualSize <= 1199 && actualSize > 991) { newWindowSize = 'md'; }
if (actualSize <= 991 && actualSize > 767) { newWindowSize = 'sm'; }
if (actualSize <= 767) { newWindowSize = 'xs'; }

if (windowSize != newWindowSize) {
    windowSize = newWindowSize;
    loadCloudZoom();
} else {
}
}

通过上面的函数，我可以根据浏览器窗口的宽度加载某些函数。通常我所做的是使用 if 语句来确定窗口大小，并仅在大小发生变化时加载该函数。我创建的用于加载选项卡、可折叠菜单的所有其他函数都可以工作，但 cloudzoom 则不然。

我从 img 标签中删除了选项。我必须加载cloudzoom的函数如下:

function loadCloudZoom() {
if (windowSize == 'xs') {
    $('.cloud-zoom').attr('rel','position:\'inside\', showTitle:false, adjustX:0, adjustY:0').CloudZoom();
} else {
    $('.cloud-zoom').attr('rel','position:\'zoomWindow\', showTitle:false, adjustX:0, adjustY:0').CloudZoom();
}
}

在屏幕小于 768px 的设备上加载页面时，cloudzoom 会加载到图像内部，对于更宽的屏幕，cloudzoom 会加载到右侧，这很好，但我真正想要的是这样显示它无需重新加载页面，即可在检测到浏览器大小发生变化时更改 cloudzoom 位置。

如果有人有任何建议，我会洗耳恭听......谢谢!

Answer 1

简单干净:

@media (max-width: 768px){
    .cloud-zoom-big { display: none!important;} /* disable cloud zoom */
}