1

Web サイトで BJQS スライダーを使用しています。

同じWebサイトでfancyboxも使用しています。

ファンシーボックスが開いているときにBJQSを一時停止し、閉じると再開したいと思います。

BJQSの一時停止/再生トグルボタンを作成する方法を知っている人はいますか?

ありがとう

4

4 に答える 4

1

fancybox にはいくつかのコールバックが付属しているため、次のようなことができるはずです。

仮想ホバリングに関する Lee と Edwards のアイデアの採用..

$(".fancybox").fancybox({
    padding : 0,
    openEffect : 'elastic',
    closeEffect: 'elastic',
    beforeLoad: function(){
        $(".banner").trigger("mouseover");
    },
    afterClose: function(){
        $(".banner").trigger("mouseout");
    }
});
于 2013-08-23T12:14:31.567 に答える
1

ソース ファイルを編集して、スライダーを一時停止する方法を提供したり、非表示にしてクリックをトリガーできるボタンを追加したりしないで、最も簡単な方法は、スライダーを一時停止させるマウス イベントをトリガーすることです。

デモを見るとmouseover、スライダーを動かすと、マウスをスライダーの外に移動するまでスライダーのアニメーションが停止することがわかります。したがって、これらのイベントをシミュレートできます。

スライダー div が#sliderBJQS サイトのデモに似ていると仮定すると、次のようになります。

ファンシーボックスオープン時

$('#slider').trigger('mouseover');

ファンシーボックスのクローズ時

$('#slider').trigger('mouseout');

http://fancybox.net/apiにアクセスして、オープン/クローズ コールバックを定義する方法を確認してください(最初の表の一番下、「オン」オプションを参照)。

于 2013-08-22T15:25:06.403 に答える
1

プラグインを確認しましたが、スライダーを一時停止/再生する方法が見つかりません。

次のオプションが表示されます。

hoverpause : true, // ホバー時のスライドの一時停止を有効/無効にします

したがって、スライダー自体でオーバー状態をトリガーすることにより、この方法で「ハッキング」できます。

var stopbjqs = false;
$(function () {
    $('#dialog').bjqs({
        'showmarkers': false,
            'responsive': true,
            'automatic': true
    });

    $("#btn").click(function () {
        if (!stopbjqs) {
            $("#dialog").trigger("mouseover");
            stopbjqs=true;
        } else {
            $("#dialog").trigger("mouseout");
            stopbjqs=false;
        }
    });

});

しかし、スライダーを操作するいくつかのメソッドを用意した方が確実に優れています。

デモ: http://jsfiddle.net/IrvinDominin/P8UgQ/

于 2013-08-22T15:28:25.277 に答える
1

プラグインに再生/一時停止ボタンを追加しようとしているときに、これに遭遇しました。に関連する@Irvin Domininの提案hoverpauseは良いですが、マウスオーバー/マウスアウトがトリガーされたときにバナーをホバーするとすぐに失敗します。

新しい設定でプラグインを拡張し、オフにすることにしましたhoverpause。

最初にdefaultsオブジェクトに設定を追加します。

// slider default settings
var defaults = {
    enableplaypause: false  // shows play/pause button
};

次に、ボタンにクリック バインディングを設定します。これはinit()関数で行われます。

// run through options and initialise settings
var init = function () {

    // configurations only avaliable if more than 1 slide
    if (state.slidecount > 1) {

        //enable play/pause button using setting we defined earlier
        if (settings.enableplaypause) {
            conf_enableplaypause();
        }
    }
};

次にconf_enableplaypause();、状態とボタンのバインドを処理する関数について説明します。

var conf_enableplaypause = function () {
    $('#btn').click(function () {
        if (!state.paused) {
            clearInterval(state.interval);
            state.paused = true;
            $('#btn').text('PAUSED');
        } else {
            state.interval = setInterval(function () {
                go(vars.fwd, false);
            }, settings.animspeed);
            state.paused = false;
            $('#btn').text('PLAYING');
        }
    });
};

非常に簡単で、基本的にはhoverpause、ボタンのクリックとボタンのテキストの更新以外の動作のコピーです。

うまくいけば、これは誰かを助ける

于 2014-09-12T10:43:36.690 に答える