Question

我根据Javascript PhotoSwipe图库创建了一个jAlbum PhotoSwipe皮肤，（参见：http://jalbum.net/nl/skins/skin/PhotoSwipe和改编的示例相册：http://andrewolff.jalbum.net/Reestdal_PSB/）

我想添加一个额外的按钮来显示或隐藏照片的Exif数据。

首先我按照Dmitry Semenov的建议尝试在右上角添加一个标准按钮，见https://github.com/dimsemenov/PhotoSwipe/issues/802 虽然我不知道如何在sprite default-skin.png和default-skin.svg中添加一个按钮，但是你会看到一个额外的按钮，其图像与＆＃39;全屏＆＃39;相同。带有Windows 10的PC右上角的图标，请参阅http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5在iPad等触摸屏设备上，这是一个全屏＆＃39;现在也显示图标（没有此修改时不存在）。单击PC和iPad上的该按钮，您会看到Exif数据将会出现并消失，您再次单击该按钮。所以这是正确的，但很难改变图像。

接下来，我尝试使用exif.png imjage以通常的方式添加按钮。我确实添加了＆lt; div class =＆＃34; pswp__top-bar＆＃34;＆gt;下一行：

<img src="res/exif.png" class="button--exif" alt="Show/Hide Exif data" title="button--exif, OK on PC not OK on iPad" onClick="javascript:toggleExif()">

并添加到我的css文件中：

 .button--exif {
    display: block;
    position: absolute;
    left: 170px;
    padding-right:20px;
    padding-left: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
    z-index: 9999;
}

您会在页面http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5的左上角看到结果此按钮可见，可在我的电脑上使用。在我的iPad上，您会看到按钮，但点击功能在此触摸屏设备上不起作用。

最后我添加了添加到＆lt; div class =＆＃34; pswp__top-bar＆＃34;＆gt;下一行：

<button class="pswp__button pswp__button--play" title=".pswp__button--play, OK on PC not OK on iPad" onClick="javascript:toggleExif()"></button>

并添加到我的css文件中：

 .pswp__button--play {background-position: -188px -44px; }

 .pswp__button.pswp__button--play {
   background-image: url(play.png);
   background-size: 30px 30px;
   background-position: 0; /* or: center center; */
 }

您会在页面http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5的右上角看到结果为暂停按钮如上所述，此按钮可见，可在我的电脑上使用。在我的iPad上，您会看到按钮，但点击功能在此触摸屏设备上不起作用。

所以我的问题是，你添加/更改了什么，以便我的exif.png按钮也能在触摸屏设备上运行？

Answer 1

我找到了下一个解决方案来添加一个带有png文件中定义的图像的额外按钮：

在pswp__counter后面的顶栏部分添加链接和按钮：

 <div class="pswp__counter"></div>
 <a href="javascript:toggleExif()" id="link--play"><img src="res/play.png"  width="30" height="30" id="$playpause" title="link--play, OK on PC and on iPad "></a>

并添加到css文件：

#link--play  {
    position: absolute;
    right: 18%;
    padding: 6px;
    z-index: 9999;
}

iPad需要z-index属性，但不适用于Android平板电脑，也不适用于Windows PC。您会看到结果为第http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5页

页面上暂停按钮左侧的播放按钮

我使用此按钮启动幻灯片演示，如jAlbum PhotsSwipe皮肤示例相册中所示：http://andrewolff.jalbum.net/Reestdal_PS/

如何在PhotoSwipe上添加按钮？

1 个答案: