如何向照片滑动添加按钮

How to add a button to PhotoSwipe?

本文关键字：添加 按钮 照片      更新时间：2023-09-26

我基于 Javascript PhotoSwipe 库制作了一个 jAlbum PhotoSwipe 皮肤，（参见：http://jalbum.net/nl/skins/skin/PhotoSwipe 和改编的示例专辑：http://andrewolff.jalbum.net/Reestdal_PSB/

）

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

首先，我尝试按照德米特里·谢苗诺夫的建议在右上角添加一个标准按钮，请参阅 https://github.com/dimsemenov/PhotoSwipe/issues/802虽然我不知道如何向 sprite 默认皮肤添加按钮.png和默认皮肤.svg，但在装有 Windows 10 的 PC 上，您会看到一个与右上角的"全屏"图标具有相同图像的额外按钮，请参阅 http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5 在像 iPad 这样的触摸屏设备上，现在还会显示此"全屏"图标（未经此修改时不存在）。在PC和iPad上单击该按钮，当您再次单击该按钮时，您会看到Exif数据将出现和消失。所以这是正确的，但很难改变图像。

接下来，我尝试以通常的方式添加一个带有exif.png imjage的按钮。我确实在下一行添加了

： 
<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 页的左上角看到结果此按钮可见，适用于我的 PC。在我的iPad上，您会看到该按钮，但是单击功能在此触摸屏设备上不起作用。

最后我添加了

下一行： 
<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按钮也可以在触摸屏设备上工作？

我找到了下一个解决方案，即添加一个额外的按钮，其中包含在 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;
}

z-index 属性对于 iPad 是必需的，但对于 Android 平板电脑不是必需的，对于 Windows PC 也不是必需的。您会看到结果为第 http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5 页上暂停按钮左侧的"播放"按钮

我使用此按钮开始幻灯片演示，如您在jAlbum PhotsSwipe皮肤示例相册中看到的那样：http://andrewolff.jalbum.net/Reestdal_PS/

相关文章：