Special photoswipe toolbar with jQuery mobile

Question

I am new to jQuery mobile and jquery. I am working on a project with a phone and jQuery mobile. I use PhotoSwipe for image gallery. It works beautifully and displays images. But I want to create my own photoswipe toolbar for my gallery. I saw their sample custom toolbar and almost did it. But although I am new to this sector, therefore, I have not been able to integrate it with jQuery mobile. And my custom button doesn't work at all. Here is my sample code.

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

The Show All button does not work at all. I tried their code but no luck. I even tried exactly what I’m doing now, but it still doesn’t work. Sorry for my poor english. Please help me ... Thanks in advance.

Answer 1

Description

This is a PhotoSwipe error, maybe not an error, but a problem.

First, let me ask you why you want to have two buttons with the same properties? Button Back and your View All button will do the same.

Photoswipe will only improve the first appearance of the ps-toolbar-close class, all others will be ignored. To be the voices, I do not see the point in this decision. If the user wants more buttons, just let them have one.

This problem can be solved programmatically.

Decision

Working example: 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(); }); });