jquery - Jquery Fancybox 2 ボタン ヘルパーの位置

Question

fancybox 関数に情報を渡すことができることはわかっているので、特定の設定をカスタマイズします。そのうちの 1 つは、ボタン ヘルパーの [上] または [下] です。また、CSS ファイルを変更することで、ボタンの正確な位置を変更できることも知っています。ただし、ボタンが常に画像の真上になるように、ボタンを画像の高さに自動的に調整する方法はありますか。

Answer 1

私は追加の小さなヘルパーでこれを解決しています。

$('a.lightbox').fancybox({
    closeBtn: false,
    helpers: {
        title: {type: 'float'},
        buttons: {
            skipSingle: true
        },
        custom: {}
    }
});

$.fancybox.helpers.custom = {
    defaults: {
        position: 'top',
        space: 0
    },
    onUpdate: function(opts, obj) {
        this.setPosition(opts, obj);
    },
    afterShow: function(opts, obj) {
        this.setPosition(opts, obj);
    },
    setPosition: function(opts, obj) {
        // default position
        var top = '20';
        var offset = $('.fancybox-wrap').offset();
        if (opts.position === 'top') {
            top = (offset.top - ($('#fancybox-buttons').height() + opts.space));
        } else if (opts.position === 'bottom') {
            top = (offset.top + $('.fancybox-wrap').height() + opts.space);
        }
        $('#fancybox-buttons').css({top: top + 'px', position: 'absolute'});
    }
};

コントロールの位置(上/下)とスペースを設定することができます。

モバイル デバイスで position() 関数と css の位置が「固定」されていると問題が発生するため、offset() 関数を使用して css の位置を「絶対」に設定しています。

HTH

クロース

Answer 2

この「トップ」を #fancybox-left-ico、#fancybox-right-ico {top:50%;} で編集するか、{top:-20px;} または /js/fancybox- で好きなものに変更できます。 1.3.4/jquery.fancybox-1.3.4.css の 153 行目は次のようになります。

#fancybox-left-ico, #fancybox-right-ico {
    cursor: pointer;
    display: block;
    height: 30px;
    left: -9999px;
    margin-top: -15px;
    position: absolute;
    top: 50%;                   /* this line is what you want to change */
    width: 30px;
    z-index: 1102;
}

古いファンシーのために編集

次のファイルで実行できる編集: http://www.thomasantonini.webuda.com/fancybox/helpers/jquery.fancybox-buttons.css?v=1.0.5

最初に 8 行目: これにより、player オプションを使用してファンシーボックス ボタンが上に移動します。

#fancybox-buttons.top {
    top: 0;
}

146 行目の次の変更: これにより、右 (次) 矢印のクリックが変更されます。

.fancybox-next span {
    background-position: 0 -72px;
    right: 0;
    top: -15px;
}

141 行目: 前の矢印を変更します。

.fancybox-prev span {
    background-position: 0 -36px;
    left: 10px;
    top: -15px;
}

これらの矢印の変更により、閉じるボタンと同じ高さになります。これはあなたが探しているものですか？