Javascript Photosweep自定义按钮

Javascript Photosweep自定义按钮,javascript,jquery,jquery-mobile,photoswipe,Javascript,Jquery,Jquery Mobile,Photoswipe,可以给Photosweep添加一个按钮吗?我知道我可以对按钮进行点击事件,但是我不能更改按钮图标。是否可以添加一个新按钮,用普通java脚本函数“print”打印图片?我正在使用下载按钮执行类似的操作 添加新按钮: <button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button> 12px 12px是图像的偏移量,有助于图像居中。根据需要

可以给Photosweep添加一个按钮吗?我知道我可以对按钮进行点击事件,但是我不能更改按钮图标。是否可以添加一个新按钮,用普通java脚本函数“print”打印图片?

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

添加新按钮:

<button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button>
12px 12px
是图像的偏移量,有助于图像居中。根据需要调整此值和
背景大小


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

最新版本的Photosweep(4.1.0、4.1.1)似乎要求您实际自定义它以添加新按钮。只需在html中添加按钮并对其进行适当的样式设置,就可以在大多数浏览器上正常工作,但在Android上不行,因为在Android中,Photosweep不会让事件通过来触发按钮

下面是添加like按钮的示例

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

<button class="pswp__button pswp__button--like" title="Like"></button>
文件like.png将包含您的按钮图标。由于我使用的是基于字体的图标,所以我没有使用background属性,而是将内容添加到我的
。如果您这样做,您需要通过在css中添加以下内容来覆盖默认背景:

.pswp__button--like {
    background: inherit !important;
}
为了让它在Android上运行,您需要编辑photoswip-ui-defaults.js,并在以下元素中为您的按钮添加一个条目:

{
    name: 'button--like',
    option: 'likeEl',
    onTap: function() {
        // handle your button click event here
    }
}
如果您正在使用photoswip-ui-defaults.min.js,请不要忘记更新它

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

likeEl: true

如果跳过最后一步,按钮将不会激活。

我正在使用您的代码,但在更新default.js文件时出现错误(缺少变量名)。好像你的代码有一部分丢失了。任何建议。非常感谢@Steve Capell。它帮助了我。
{
    name: 'button--like',
    option: 'likeEl',
    onTap: function() {
        // handle your button click event here
    }
}
likeEl: true