0

私たちのサイトには動画のサムネイルがあり、サムネイルをクリックすると動画がモーダル ダイアログで開きます。

ビデオ自体は 16:9 ですが、プレーヤーの下部に追加の詳細があるため、そうではありません。

ダイアログには、拡大と縮小の 2 つのボタンがあります。

ボタンは、(originalsize (*|/) growBy) のステップでプレーヤーを拡大/縮小します。したがって、元の 50% のステップの場合、growBy は 1.5 になります。

とにかく、これはすべてうまく機能しており、コードブロック＃1に示されています。

私が直面している問題は、ダイアログがウィンドウの幅または高さを超えて拡大するように求められた場合に、(比率で) 最大サイズまで拡大するように、制限を設ける必要があることです。

たとえば、ウィンドウの最大幅を超えて拡大するように求められた場合、ダイアログの幅 (パディングを含む) はウィンドウの幅と等しくなりますが、高さは等しくなりません (もちろん、ダイアログの比率がたまたまウィンドウと正確に一致しない限り、しかし、それはありそうにない!)

逆に、ウィンドウの最大高さを超えて拡大するように求められた場合、ダイアログの高さ (パディングを含む) はウィンドウの高さと等しくなりますが、高さは等しくなりません (ダイアログの比率がたまたまウィンドウと正確に一致しない限り)。 .

これは私が立ち往生している場所であり、私の試みはコードブロック＃2にあります。現在、高すぎる高さのチェックを行っていますが、高さを行うためにうまく機能しています。高さのステップが調整されたときに幅がどうあるべきかを理解する方法を知っています。興味深いコードは Code Block pre#2 にあります。

私の考えが正しければ、計算する必要がありvideoStep.height tempStep.heightます。tempStep.widthvideoStep.width+ (videoStep.width*percentage)

しかし、私はやってみました：

var percentage = tempStep.height/videoStep.height;
tempStep.width = videoStep.width+(videoStep.width*percentage);

代わりに

tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

しかし、ビデオの比率が失われるため、幅が大きくなりすぎているようです (プレーヤーの比率は 586:281 になります)。

コードブロック pre#2

var windowSize = {
    height: $(window).height(),
    width: $(window).width()
};

useTempStep = false;
var fullDialogSize = {
    height: newDialogSize.height+videoDialogSize.padding.height,
    width: newDialogSize.width+videoDialogSize.padding.width
};
if(fullDialogSize.height > windowSize.height){

    $growButton.addClass('disabled');

    tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
    tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

    useTempStep = true;

    newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
    newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width //This line is not being calculated right!
    };

}

コードブロック #1

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width()
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var clickHandler = function () {
    var button = $(this);

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, videoStep, action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);

コードブロック #2

function sizeCalc(currentPlayerSize, step, action){
    var newPlayerSize;
    if (action == 'grow') {
        newPlayerSize =  {
            height: currentPlayerSize.height + step.height,
            width: currentPlayerSize.width + step.width
        };
    } else {
        newPlayerSize =  {
            height: currentPlayerSize.height - step.height,
            width: currentPlayerSize.width - step.width
        };
    }

    return newPlayerSize;
}

var $videoDialog = $('#video');
var $videoPlayer = $('#video-player_wrapper');
var $growButton = $('.resizeVideo[data-action="grow"]', $videoDialog);
var $shrinkButton = $('.resizeVideo[data-action="shrink"]', $videoDialog);
var growBy = 1.5;
var videoPlayerSize = {
    height: $videoPlayer.height(),
    width: $videoPlayer.width()
};

var videoDialogSize = {
    height: $videoDialog.height(),
    width: $videoDialog.width(),
    padding: {
        height: $videoDialog.outerHeight() - $videoDialog.height(),
        width: $videoDialog.outerWidth() - $videoDialog.width()
    }
};

var dialogDifference = {
    height: videoDialogSize.height - videoPlayerSize.height,
    width: videoDialogSize.width - videoPlayerSize.width
};

var videoStep = {
    height: (videoPlayerSize.height*growBy)-videoPlayerSize.height,
    width: (videoPlayerSize.width*growBy)-videoPlayerSize.width
};

var tempStep = {
    height: 0,
    width: 0
};

var useTempStep = false;

var clickHandler = function () {
    var button = $(this);

    if(button.hasClass('disabled')){
        return;
    }

    $growButton.removeClass('disabled');

    var action = button.data('action');

    var currentPlayerSize = {
        height: $videoPlayer.height(),
        width: $videoPlayer.width()
    };

    var newPlayerSize = sizeCalc(currentPlayerSize, (useTempStep ? tempStep : videoStep), action);

    var newDialogSize = {
        height: newPlayerSize.height + dialogDifference.height,
        width: newPlayerSize.width + dialogDifference.width
    };

    var windowSize = {
        height: $(window).height(),
        width: $(window).width()
    };

    useTempStep = false;
    var fullDialogSize = {
        height: newDialogSize.height+videoDialogSize.padding.height,
        width: newDialogSize.width+videoDialogSize.padding.width
    };
    if(fullDialogSize.height > windowSize.height){

        $growButton.addClass('disabled');

        tempStep.height = (newDialogSize.height-videoDialogSize.padding.height) - windowSize.height;
        tempStep.width = (newDialogSize.width-videoDialogSize.padding.width) - windowSize.width;

        useTempStep = true;

        newPlayerSize = sizeCalc(currentPlayerSize, tempStep, action);
        newDialogSize = {
            height: newPlayerSize.height + dialogDifference.height,
            width: newPlayerSize.width + dialogDifference.width
        };

    }


    var newMargin = -(newDialogSize.width / 2);

    $videoDialog.animate({
        height: newDialogSize.height,
        width: newDialogSize.width,
        marginLeft: newMargin
    });

    $videoPlayer.animate({
        height: newPlayerSize.height,
        width: newPlayerSize.width
    });
};

$growButton.on('click', clickHandler);
$shrinkButton.on('click', clickHandler);
4

1 に答える 1

1

高さを1に縮小する必要がある場合は、幅を比率と一致させる必要があります。(16/9 は幅と高さの比率を指しているため)

疑似コード:

new_height = max_height;
new_width  = height * ratio;
// where ratio = 16/9

変更することをお勧めするものは次のとおりです。

    var ratio = currentPlayerSize.width / currentPlayerSize.height,
        new_height = newPlayerSize.height + dialogDifference.height;

    newDialogSize = {
        height: new_height,
        width:  new_height * ratio
    };

ノート：

1高さ > 幅および高さ > max_height の場合、高さを変更する必要があります

または、おそらくあなたの問題はただの中にあるかもしれませんsizeCalc():

    function sizeCalc(currentPlayerSize, step, action){
        var newPlayerSize,
            ratio = currentPlayerSize.width / currentPlayerSize.height;
            new_height;

        if (action == 'grow') {
            new_height = currentPlayerSize.height + step.height;
        } else {
            new_height = currentPlayerSize.height - step.height;
        }

        newPlayerSize =  {
            height: new_height,
            width:  new_height * ratio
        };

        return newPlayerSize;
    }
于 2013-02-20T02:08:11.250 に答える