javascript - Photoswipe 自定义按钮

Question

是否可以向 Photoswipe 添加按钮？我知道我可以对按钮进行点击事件，但我无法更改按钮图标。是否可以添加一个新按钮来使用普通的 Java 脚本功能“打印”打印图片？

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 文件中将包含您的按钮图标。因为我使用的是基于字体的图标，所以我做了不同的事情，所以我没有使用背景属性，而是将内容添加到我的 <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

如果您跳过这最后一步，您的按钮将不会被激活。