jquery - 在响应站点​​中使用多个实例调整 Colorbox 大小

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，它们具有不同的设置(例如宽度)。当我为颜色框设置窗口调整大小功能时，我需要为每种内容类型设置不同的调整大小宽度。

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

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

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

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

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

Answer 1

一次您只在屏幕上显示一个颜色框，因此在window调整大小事件中只需设置当前可见的颜色框的宽度。

试试这个。

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