使用jquery mobile的photoswipe自定义工具栏

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