6

私はjquery mobileとjqueryも初めてです。phonegap と jquery mobile を使用したプロジェクトに取り組んでいます。画像ギャラリーに PhotoSwipe を使用しています。それはうまく機能しており、画像を表示しています。しかし、ギャラリーの写真スワイプ用のカスタム ツールバーを作成したいと考えています。与えられたカスタムツールバーのサンプルを見て、ほぼ完成しました。しかし、私はこの分野では新しいので、jquery mobile との統合に失敗しました。また、カスタム ボタンがまったく機能しません。これが私のコードサンプルです。

for (var i = 0; i < photo_len; i++) {
    $('.GalleryAccessories').append('<li><a href="' + image_item[i].original + '" rel="external"><img src="' + image_item[i].original + '" alt=""/></a></li>');
}

$('.GalleryAccessories').trigger("create");

var myPhotoSwipe = $(".GalleryAccessories a").photoSwipe({
    getToolbar: function(){
        return '<div class="ps-toolbar-close" style="padding-top: 12px;">Back</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="ps-toolbar-close" style="padding-top: 12px;">View All</div>';
    },
    jQueryMobile: true,
    loop: false,
    enableMouseWheel: false,
    enableKeyboard: false
});

myPhotoSwipe.show(0);

[すべて表示] ボタンがまったく機能しません。指定されたコードを試しましたが、運がありません。私は今私がしていることを試してみましたが、それでもうまくいきません。私の下手な英語でごめんなさい。助けてください...よろしくお願いします。

4

1 に答える 1

7

説明

これは PhotoSwipe のバグです。バグではないかもしれませんが、まだ問題があります。

最初に、同じプロパティを持つ 2 つのボタンを使用する理由をお聞かせください。Button Back とあなたのボタン View All は同じことをします。

Photoswipe は、クラスps-toolbar-closeの最初の発生のみを強調し、他のすべては無視されます。正直に言うと、このソリューションのポイントがわかりません。ユーザーがより多くのボタンを必要とする場合は、それを許可してください。

この問題は、プログラムで解決できます。

解決

作業例: http://jsfiddle.net/Gajotres/nBZfT/

HTML :

<div class="ps-toolbar-close second-close" style="padding-top: 12px;">View All</div>

Javascript :

myPhotoSwipe.addEventHandler(window.Code.PhotoSwipe.EventTypes.onShow, function(e) {
    $(document).off('click', '.second-close').on('click', '.second-close', function(){    
        e.target.hide();
    });
});
于 2013-05-12T12:37:50.643 に答える