Question

我正在尝试将colorbox与即将推出的响应式网站一起使用。在加载时设置初始宽度没有任何问题。你可以在这里看到。

links4.live( 'click', function(e) {     
    e.preventDefault();

    $(this).tipsy("hide");

    $.colorbox({
        href: this.href,
        width: function() {
            if( $('.content').width() < windowWidth3) {
                eventWidth = view4+'px'
            } else if( ($('.content').width() >= windowWidth3) && ($('.content').width() < windowWidth2) ) {
                eventWidth = view3+'px'

            } else if( ($('.content').width() >= windowWidth2) && ($('.content').width() < windowWidth1)  ) {
                eventWidth = view2+'px'
            } else {
                eventWidth = view1+'px'
            }

            return eventWidth;
        },
        initialWidth: '100px',
        initialHeight: '100px',
        scrolling: false
    });
});

我遇到了colorbox resize函数和window resize函数的问题。我在两种类型的内容上使用colorbox，这些内容具有不同的设置，如宽度。当我为colorbox设置窗口调整大小功能时，我需要为每种内容类型设置不同的调整大小宽度。

窗口宽度 - 960px 内容1 - 885px 内容2 - 767px

窗口宽度 - 768像素内容1 - 644px 内容2 - 300px

$(window).resize( function() {
    // #1
    $.colorbox.resize({
        width: 644+'px'
    });

    // #2
    $.colorbox.resize({
        width: 300+'px'
    });
});

当我尝试调整内容类型的大小时，colorbox会将两种内容类型调整为一个宽度。如何将调整大小功能应用于colorbox的特定实例，以便设置不同的宽度？

Answer 1

此时您只在屏幕上显示一个颜色框，因此在window resize事件中，只需设置当前颜色框的宽度即可。

试试这个。

var currentColorBox = 
links4.live( 'click', function(e) {     
    e.preventDefault();

    $(this).tipsy("hide");

    //This will be used in the window.resize event handler
    currentColorBox = this.href;

    $.colorbox({
        href: this.href,
        width: function() {
            ....
            ...
        },
        initialWidth: '100px',
        initialHeight: '100px',
        scrolling: false
    });
});

$(window).resize( function() {
    if(currentColorBox == "specifyCorrectTheUrl"){
         $.colorbox.resize({
             width: 644+'px'
         });
    }
    else{
         $.colorbox.resize({
             width: 300+'px'
         });
});

Colorbox在响应式站点中调整多个实例的大小

1 个答案: