1

Flickr から取得した画像を表示するためにprettyPhotoを使用しています。デスクトップとiPadでうまく機能しています。iPad では、画像を切り替えるためのスワイプ ジェスチャを追加したいと考えていました。だから私はTouchSwipeを追加しようとしていました。

これが私の prettyPhoto のセットアップ方法です。コールバックに注意してください。

function setupBox() {
    $("a[rel^='prettyPhoto[gallery1]']").prettyPhoto({
        slideshow: 5000,
        social_tools: '',
        animation_speed:'normal',
        theme:'facebook',
        changepicturecallback: function() {
            setupSwipe();
        }
    });
}

これがコールバック関数です。「#fullResImg」は画像のセレクターです。

function setupSwipe() {
    $('#fullResImg').swipe({
        swipe:function(event, direction, distance, duration, fingerCount) {
            if( direction == 'left' ) {
                $.prettyPhoto.changePage('next');
            }else if ( direction == 'right' ) {
                $.prettyPhoto.changePage('previous');
            }
        },
        allowPageScroll: "none",
    });
}

すべての関数が正しく呼び出されますが、スワイプは検出されません。セレクターを「.pp_content」に変更すると、ボックスの下部をスワイプできますが、画像自体はスワイプできません。

ボックスの積み重ねと関係があるのではないかと思いますが、他のいくつかのセレクターを試しましたが、実際の画像では機能しませんでした。

ここに pP Box のマークアップを含めます。

<div class="pp_pic_holder facebook" style="top: 90.5px; left: 80px; display: block; width: 816px;">
   <div class="ppt" style="opacity: 1; display: block; width: 776px;">LN-RKI</div>
   <div class="pp_top">
    <div class="pp_left"></div>
    <div class="pp_middle"></div>
    <div class="pp_right"></div>
   </div>
   <div class="pp_content_container">
    <div class="pp_left">
    <div class="pp_right">
     <div class="pp_content" style="height: 552px; width: 776px;">
      <div class="pp_loaderIcon" style="display: none;"></div>
      <div class="pp_fade" style="display: block;">
       <a href="#" class="pp_expand" title="Expand the image" style="display: inline;">Expand</a>
       <div class="pp_hoverContainer" style="height: 516px; width: 776px;">
        <a class="pp_next" href="#">next</a>
        <a class="pp_previous" href="#">previous</a>
       </div>
       <div id="pp_full_res"><img id="fullResImage" src="http://farm9.static.flickr.com/8489/8265747809_d0fca2a7c9_b.jpg" style="height: 516px; width: 776px;"></div>
       <div class="pp_details" style="width: 776px;">
        <div class="pp_nav" style=""><a href="#" class="pp_play">Play</a>
         <a href="#" class="pp_arrow_previous">Previous</a>
         <p class="currentTextHolder">1/50</p>
         <a href="#" class="pp_arrow_next">Next</a>
        </div>
        <p class="pp_description" style="display: none;"></p>
        <div class="pp_social"></div>
        <a class="pp_close" href="#">Close</a>
       </div>
      </div>
     </div>
    </div>
    </div>
   </div>
   <div class="pp_bottom">
    <div class="pp_left"></div>
    <div class="pp_middle"></div>
    <div class="pp_right"></div>
   </div>
  </div>
 <div class="pp_overlay" style="opacity: 0.8; height: 954px; width: 959px; display: block;"></div>

それで、ここに誰もがかなり写真の画像をスワイプするためにTouchSwipeを使用する方法の手がかりを持っていますか?

前もって感謝します！

4

3 に答える 3

1

上記の回答を使用して同じ機能を実装しましたが、TouchWipeを使用したところ、「.pp_hoverContainer」を削除する代わりに、次のようにスワイプ アクションをその要素に追加できることがわかりました。

    $(document).ready(function(){
        function setupBox() {
           $("a[rel^='prettyPhoto']").prettyPhoto({
                social_tools: false,
                theme:'dark_rounded',
                changepicturecallback: function() {
                    setupSwipe();
                }
           });
        }
        function setupSwipe() {
           $(".pp_hoverContainer").touchwipe({
            wipeLeft: function() { 
                $.prettyPhoto.changePage('next');
            },  
            wipeRight: function() { 
               $.prettyPhoto.changePage('previous');
        },
           min_move_x: 20,
           min_move_y: 20,
           preventDefaultEvents: true
       });
   }
   setupBox();
   });
于 2013-01-18T20:28:32.497 に答える
1

わかりました、回避策を見つけました。あまりきれいではありませんが、このサイトには十分です。

次のコードを changepicturecallback に追加しました。

if( document.width <= 1024 )
{
    $('.pp_hoverContainer').remove();
}

これにより、ドキュメントの幅が 1024 以下の場合、ナビゲーション オーバーレイが完全に削除されます。これは、Android Chrome、iOS Chrome、iOS Safari で機能します。

「#pp_full_res」でスワイプを設定したことを追加する必要があります。私の質問とは違います。

そうです、それはスタッキングの問題でした。.pp_hoverContainer でスワイプをトリガーしても機能しませんでした。良い副作用: スワイプ モードでナビゲーション矢印が表示されない :)

于 2012-12-14T19:16:48.463 に答える
0

私はあなたのコードを使用し、「#fullResImg」セレクターを「.pp_hoverContainer」に変更しただけで、スワイプが機能しました。

于 2018-12-18T11:22:39.730 に答える