jquery - Photoswipe + JQM: バックイベント発行

Question

$(document).on("pagecreate", function() {
            $.jsonp({
                URL: 'URL_TO_GET_JSONP',
                callbackParameter: 'get_photo',
                成功: 関数 (json, ステータス) {
                    var 写真 = [];
                    var path = 'URL_TO_GET_JSONP';
                    $.each(json, 関数(a,b){
                        photo.push('
');
                        photo.push('');
                        photo.push('
');
                    });
                    $('.gallery').html(photo.join(''));

                    var myPhotoSwipe = $(".gallery a").photoSwipe({
                        enableMouseWheel: false,
                    }))
                }、
                エラー: 関数(){
                    alert("写真を読み込めません。");
                }
            });
        });

ギャラリーとブラウザの戻るボタンに問題があります。ユーザーは、小さな (x) ボタンではなく、戻るボタンを押してギャラリーから出る可能性が高くなります。問題は、戻るボタンを使用すると、ページの背景だけのナビゲーションやコンテンツのない空白のページになってしまうことです。(例: http://www.photoswipe.com/latest/examples/04-jquery-mobile.html )

回避策はありますか？

Answer 1

私はまだ自分で答えを探していますが、おそらくこれはあなたを助けるでしょう。

jQuery Mobileはハッシュを使用して、ページを履歴に保持し、元に戻ります。Photoswipeでカルーセルモードに入ると、イベントハンドラーがバックイベントにアタッチされます（閉じる（x）ボタンは、履歴のギャラリーインデックスページに戻るだけです）。閉じる（x）ボタンを使用すると、イベントハンドラーが切り離され、jQueryMobileに制御が戻ります。デバイスの戻るボタンを使用してカルーセルから抜け出すことは、jQueryMobileのハッシュリストがどういうわけか台無しになっているため機能しません。

修正を見つけたら、ここに投稿します。

（ソリューションを追加するために編集されました。）

私は自分に合った解決策を見つけました。

あなたがする必要がある2つのことがあります：1）bodyタグからps-activeクラスを削除します2）すべてのphotoswipeインスタンスを見つけてそれらの設定を解除します

次のコードは私のために働いた：

$(document).bind('pagebeforechange', function(e) {
if ($('.ps-carousel').length) {
    $('body').removeClass('ps-active');
    $('div.gallery-page').each(function(){
        var photoSwipe = window.Code.PhotoSwipe;
        var photoSwipeInstance = photoSwipe.getInstance($(this).attr('id'));
        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
            photoSwipe.unsetActivateInstance(photoSwipeInstance);
        }
    });
}
});

フォトワイプの例（ http://www.photoswipe.com/latest/examples/04-jquery-mobileなど）で使用されているものと同じクラスを使用していない場合は、「div.gallery-page」を変更する必要があることに注意してください。 .html）

Answer 2

私は自分のqnsの解決策を見つけました。ご覧ください。

$.ajax({
        URL: URL_TO_GET_JSON、
        成功: 関数 (json, ステータス) {
            var p = [];
            $.each(json, 関数(a,b){
                // ここに画像を描画します。
            });
            $('.gallery').html(photo.join(''));


        // ここでインスタンスを作成        
            var myPhotoSwipe = $(".gallery a").photoSwipe({
                enableMouseWheel: false,
            }))

          /************ ここでインスタンスの設定を解除します *****************/

            $(document).bind('pagebeforechange', function(e) {
                if ($('.ps-carousel').length) {
                    $('body').removeClass('ps-active');
                    var photoSwipe = window.Code.PhotoSwipe;
                    var photoSwipeInstance = photoSwipe.getInstance($(myPhotoSwipe).attr('id'));
                    if (typeof photoSwipeInstance != "未定義" && photoSwipeInstance != null) {
                        photoSwipe.unsetActivateInstance(photoSwipeInstance);
                        photoSwipe.detatch(photoSwipeInstance);
                    }
                }
            });
        }
    });

Answer 3

別の回答に賛成票を投じましたが、さらにテストした後、一貫して機能していないことに気付きました。photoswipe のソース コードを調べた後、それを閉じる別の方法を見つけようとするよりも、独自の hide() 関数を使用する方が良いことに気付きました。

これはまだ私にとって完璧ではありません。戻るボタンでオーバーレイが閉じられることもあれば、前のページに戻ることもありますが、これは望ましくありません。しかし、少なくともこの方法では、押し返した後に立ち往生することはありません。

photoSwipe オブジェクトによって返されるインスタンスの配列を使用し、設定されている documentOverlay によって表示されるかどうかを確認します。

$(document).on('pagebeforechange', function(e) {
if ($('.ps-carousel').length) {
  var photoSwipe = window.Code.PhotoSwipe;
  for( i = 0 ; i < photoSwipe.instances.length ; i++ )
  {
    if( !Code.Util.isNothing( photoSwipe.instances[i].documentOverlay ) ) 
    {
      photoSwipe.instances[i].hide();
    }
  }
 }
});