Question

我正在创建一个响应式网站，我正在使用cloud zoom 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 */
}

Answer 2

NVM。得到它了。当cloudZoom加载时，它会加载一个带有一类捕鼠器的新div。在加载cloudzoom之前，我只需要使用$('.mousetrap').remove()将其删除。

在窗口大小更改上加载CloudZoom

2 个答案: