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