Изменение размера Colorbox с несколькими экземплярами на адаптивном сайте - PullRequest
Новая
       12

Изменение размера Colorbox с несколькими экземплярами на адаптивном сайте

2 голосов
/ 01 марта 2012

Я пытаюсь использовать 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 и функцией изменения размера окна. Я использую colorbox для двух типов контента, которые имеют разные настройки, такие как ширина. Когда я устанавливаю функцию изменения размера окна для colorbox, мне нужно установить различную ширину изменения размера для каждого типа содержимого.

Ширина окна - 960 пикселей Содержание 1 - 885 пикселей Содержание 2 - 767 пикселей

Ширина окна - 768 пикселей Содержание 1 - 644 пикселей Содержание 2 - 300px 

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

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

Когда я пытаюсь изменить размеры типов контента, colorbox изменит размеры обоих типов контента на одну ширину. Как я могу применить функцию изменения размера к определенным экземплярам colorbox, чтобы я мог установить разную ширину?

1 Ответ

0 голосов
/ 01 марта 2012

Одновременно вы отображаете на экране только один цветной ящик, поэтому в событии 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'
         });
});
...