1

ギャラリーの指定したポイントからギャラリーを自動再生するレスポンシブ ライトボックスを探していました。Magificic Popupはかなり堅実に見えます。ライトボックスのスライドショーとして機能する方法はありますか?つまり、ギャラリーの自動進行がありますか?

、および/またはコールバックイベントを利用する方法があるはずですが、それは私のjavascriptingを超えていますmagnificPopup.next();magnificPopup.updateItemHTML();

ありがとう！

編集: 「うーん、fancybox の自動再生?」と考えている場合は、確かに、それも機能します。Magnificを試してみたい

4

4 に答える 4

2

openコールバックに間隔を入れるだけです。

callbacks: {
    open: function() {
       setInterval(function() {
            $.magnificPopup.instance.next();
       }, 2000);
   }
}

もちろん、これは非常に基本的な実装ですが、必要なところまで行くことができます。

于 2013-05-18T11:33:31.360 に答える
0

私のマグニフィック ポップアップ スライド ショーは、「スライド ショーの開始」ボタンと目的の間隔の入力を備えた小さなフォームを使用します。スライド ショー オブジェクトには、基本的に次のコードがあります。

var slideshow = {
    interval: 4,
    intervalTimer: null,
    currImgNo: 0,
    insertController: function(parentElement) {
        // DOM code to create form html
        $(slideShowStartButton).on('click', function(e){
            $('.popup-parent-container').magnificPopup('open', slideshow.currImgNo);
            if ($.magnificPopup.instance.index + 1
                    < $.magnificPopup.instance.items.length) {
                $.magnificPopup.instance.next();
                slideshow.currImgNo++;
            } else {
                $('.popup-parent-container').magnificPopup('close');
            }
        }, slideshow.interval * 1000);
    });
}

$(document).ready(function() {
    slideshow.insertController(/* This code depends on the slide show controller html */);
});

スライド ショーのプロパティcurrImgNoは、最後にポップアップされた画像でスライド ショーに入り、ループを防ぐために使用されます。

Magnific Popup は、open および close イベント ハンドラーに追加の行を取得しました。

$('.popup-parent-container').magnificPopup({
    // ...
    callbacks: {
        open: function() {
            slideshow.currImgNo = this.index;
        },
        close: function() {
            if (slideshow.intervalTimer) {
                clearInterval(slideshow.intervalTimer);
            }
        }
    }
});

これは、少なくとも私がテストした一部の WebKit および Gecko ブラウザーでは問題なく動作します。

私のバージョンではさらに全画面表示モードが起動しますが、ブラウザー間で動作するにはさらにコードが必要です。

于 2013-12-21T11:04:20.100 に答える
0

癖がありますが、少しいじってからわかりました。ページに magnificPopup の 2 つのインスタンスがあります。1 つは要素のみで呼び出され、ギャラリー モードでは呼び出されず、もう 1 つは配列内のすべてのアイテムとギャラリーが有効になっています。このコードは 2 つのうちの後者にあります。ただし、両方のインスタンスに影響し、「非」ギャラリーは 5 秒ごとに更新されます。とにかく、以下のコードはあなたが探しているものです：

callbacks: {
    open: setInterval( function() {
        $.magnificPopup.instance.next()
    }, 5000 )
}
于 2013-06-06T15:43:38.510 に答える