Colorbox mit mehreren Instanzen in einer responsiven Webseite skalieren

Question

Ich versuche, Colorbox mit einer bevorstehenden responsiven Website zu verwenden. Beim Laden habe ich keine Probleme, die anfänglichen Breiten einzustellen. Sie können das hier sehen.

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

Ich habe ein Problem mit der Colorbox-Größenänderungsfunktion und der Fenstergrößenänderungsfunktion. Ich verwende Colorbox für zwei Arten von Inhalten, die unterschiedliche Einstellungen wie Breite haben. Wenn ich eine Fenstergrößenänderungsfunktion für Colorbox setze, muss ich unterschiedliche Größenänderungen für jede Inhaltsart festlegen.

Fensterbreite - 960px Inhalt 1 - 885px Inhalt 2 - 767px

Fensterbreite - 768px Inhalt 1 - 644px Inhalt 2 - 300px

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

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

Wenn ich versuche, die Inhaltsarten zu ändern, ändert Colorbox beide Inhaltsarten auf eine einzige Breite. Wie kann ich die Größenänderungsfunktion auf bestimmte Instanzen von Colorbox anwenden, um unterschiedliche Breiten festzulegen?

Answer 1

Zu einem Zeitpunkt wird nur eine einzelne Colorbox auf dem Bildschirm angezeigt, daher sollten Sie im window-Größenänderungsereignis die Breite der gerade sichtbaren aktuellen Colorbox festlegen.

Versuchen Sie es.

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

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

    // Dies wird im window.resize Event-Handler verwendet
    aktuelleColorBox = this.href;

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

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