Photoswipe自定义工具栏与jquery移动

photoswipe custom toolbar with jquery mobile

本文关键字：jquery 移动 工具栏 自定义 Photoswipe      更新时间：2023-09-26

我是jquery手机和jquery的新手。我正在做一个使用phonegap和jquery mobile的项目。我使用PhotoSwipe图像库。它工作得很好，并显示图像。但我想为我的图库做一个自定义的photoswipe工具栏。我看到了他们给出的自定义工具栏样本，几乎就做出来了。但是，虽然我是这个领域的新手，所以我没能将它与jquery手机集成。我的自定义按钮根本不起作用。下面是我的代码示例。

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

查看全部按钮根本不起作用。我试过他们给出的代码，但运气不好。我甚至尝试了我现在所做的，但仍然不起作用。对不起，我的英语很差。请帮帮我……

说明

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

首先让我问你为什么你想要两个具有相同属性的按钮?Button Back和你的Button View All会做同样的事情。

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();
    });
});
相关文章：