Photoswipe自定义按钮

Question

可以在Photoswipe上添加一个按钮吗？我知道我可以在按钮上进行点击事件,但是我无法更改按钮图标.是否可以添加一个新的按钮,用普通的java脚本funktion'print'打印图片？

Answer 1

最新版本的Photoswipe(4.1.0,4.1.1)似乎要求您实际自定义它以添加新按钮.只需在html中添加按钮并设置样式,它就适用于大多数浏览器,但不适用于Android,其中Photoswipe不会让事件触发您的按钮.

这是添加类似按钮的示例.

将按钮添加到html中其他按钮的位置:

<button class="pswp__button pswp__button--like" title="Like"></button>

Photoswipe使用css background属性为其按钮添加图标,因此您可以在css文件中执行以下操作:

.pswp__button--like {
    background: url(like.png) 0 0 no-repeat;
    background-size: 44px 44px;
}

文件like.png会包含你的按钮图标.因为我使用的是基于字体的图标,所以我做了不同的事情,所以我没有使用background属性,而是添加了内容<button>.如果你这样做,你需要通过向你的css添加这样的东西来覆盖默认背景:

.pswp__button--like {
    background: inherit !important;
}

要让它在Android上运行,您需要编辑photoswipe-ui-defaults.js并在_uiElements中为您的按钮添加一个条目,如下所示:

{
    name: 'button--like',
    option: 'likeEl',
    onTap: function() {
        // handle your button click event here
    }
}

如果您正在使用它,请不要忘记更新photoswipe-ui-defaults.min.js.

最后,在javascript中初始化photoswipe的地方,添加选项

likeEl: true

如果您跳过最后一步,则不会激活您的按钮.