Question

是否可以在Photoswipe上添加按钮？我知道我可以对按钮进行点击事件，但是我无法更改按钮图标。是否可以添加一个新的按钮，使用普通的java脚本funktion打印图片＆＃39; print＆＃39; ？

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
    }
}

如果您正在使用照片，请不要忘记更新照片-ui-defaults.min.js。

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

likeEl: true

如果你跳过最后一步，你的按钮就不会被激活。

Answer 2

我正在使用下载按钮执行类似操作。

添加新按钮：

<button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button>

在你的CSS中：

.pswp__button--download, .pswp__button--download:before {
  background: url('/path/to/image') 12px 12px no-repeat;
  background-size: 20px 20px;
  width: 44px;
  height: 44px;
}

12px 12px是图像的偏移量，可帮助居中。根据需要调整此值和background-size。

保持高度和宽度不变，使其与工具栏保持相同的大小。

Photoswipe自定义按钮

2 个答案: