javascript - photoswipe 自定义工具栏与 jquery 移动

Question

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

查看全部按钮根本不起作用。我已经尝试了他们给定的代码，但没有运气。我什至尝试了我现在所做的，但仍然没有用。对不起我的英语不好。 请帮我... 提前致谢。

Answer 1

解释

这是一个 PhotoSwipe 错误，也许不是错误但仍然是个问题。

首先让我问你为什么要有两个具有相同属性的按钮？返回按钮和查看全部按钮会做同样的事情。

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