javascript - photoswipe anpassad verktygsfält med jquery mobile

Jag är ny på jQuery Mobile och jQuery också. Jag arbetar på ett projekt med PhoneGap och jQuery Mobile. Jag använder PhotoSwipe för bildgalleri. Det fungerar bra och visar bilderna. Men jag vill skapa en anpassad verktygsrad för PhotoSwipe för mitt galleri. Jag såg deras exempel på anpassad verktygsrad och nästan gjorde det. Men eftersom jag är ny inom detta område lyckades jag inte integrera det med jQuery Mobile. Och min anpassade knapp fungerar inte alls. Här är mitt kodexempel.

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);

Knappen Visa alla fungerar inte alls. Jag har provat deras angivna kod men utan framgång. Jag har till och med provat precis det jag gör nu men det fungerar fortfarande inte. Sorry för min dåliga engelska. Snälla hjälp mig... Tack på förhand.

Svar #1

Förklaring

Det här är en PhotoSwipe-bugg, kanske inte en bugg men fortfarande ett problem.

Låt mig först fråga dig varför du vill ha två knappar med samma egenskaper? Knappen Tillbaka och din knapp Visa alla skulle göra samma sak.

Photoswipe kommer endast att förbättra första förekomsten av en klass ps-toolbar-close, alla andra kommer att försummas. Ärligt talat ser jag ingen poäng med denna lösning. Om användaren vill ha fler knappar, låt dem bara ha det.

Detta problem kan lösas programmässigt.

Lösning

Fungerande exempel: 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();
    });
});