jquery - ウィンドウサイズ変更のfancyBoxマージンを更新

Question

再： http： //fancyapps.com/fancybox/#docs

カスタムマージンのオプションを設定しましたが、ウィンドウが特定のサイズよりも小さい場合はそれを調整したいと思います。APIメソッドを使用してそれを実行できるかどうか誰かが知っていますか？以下は機能しませんが、私が何をしようとしているのかがわかります。

if ($(window).width() <= 1024) $.fancybox.update({margin:18});

助けていただければ幸いです。

ありがとう

Answer 1

onUpdate()fancyboxが提供するコールバックを使用し、画面の幅に基づいて余白を変更することで、この問題を解決しました。

$(document).ready(function() {
    $(".fancybox").fancybox({ 
        onUpdate: function () {
            if ($(window).width() < 768) {
                $.fancybox.current.margin = [10,10,10,10];
            } else {
                $.fancybox.current.margin = [30,90,30,90];
            }
        }
    });
});

Answer 2

メディアクエリを使用して変更を加えました。

デフォルトでは、fancyboxはコードに保持します。

padding: 0
margin: 0

次に、コンテナのdivポップアップに余白またはパディングを配置して、メディアクエリで遊んでください。

@media only screen and (min-width: 1024px) {
    ....
}