如何添加按鈕到PhotoSwipe？

我做了基於JavaScript的PhotoSwipe畫廊PhotoSwipe相冊的皮膚，（參見：http://jalbum.net/nl/skins/skin/PhotoSwipe和調整採樣專輯：http://andrewolff.jalbum.net/Reestdal_PSB/）如何添加按鈕到PhotoSwipe？

我想加一個額外的按鈕來顯示或隱藏照片的Exif數據中。

首先，我嘗試在Dmitry Semenov建議的右上角添加一個標準按鈕，請參閱https://github.com/dimsemenov/PhotoSwipe/issues/802 雖然我不知道如何將按鈕添加到sprite default-skin.png和默認皮膚。 svg，您會看到一個額外的按鈕，其圖像與裝有Windows 10的PC的右上角的「全屏」圖標相同，請參閱http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5在iPad等觸摸屏設備上，此「全屏」圖標現在也是顯示（缺少沒有此修改）。點擊PC上和iPad上的那個按鈕，你會發現Exif數據會出現並消失，你再次點擊該按鈕。所以這是正確的，但很難改變圖像。

接下來我試着用exif.png imjage以通常的方式添加一個按鈕。我沒有在< DIV CLASS =「pswp__top吧」 >添加下一行：

<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上看到按鈕，但點擊功能在此觸摸屏設備上不起作用。

最後我說沒有在< DIV CLASS = 「pswp__top吧」 >添加下一行：

<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按鈕也可以在觸摸屏設備上工作？

來源

2016-03-15 André Wolff

我找到了一個解決方案，以在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。你看結果作爲播放buttun，頁面上留下的暫停按鈕的http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5

我用這個按鈕啓動幻燈片演示，你可以在相冊的PhotsSwipe皮膚樣本畫冊看到：http://andrewolff.jalbum.net/Reestdal_PS/

來源

2016-03-30 08:53:16

如何添加按鈕到PhotoSwipe？

回答

相關問題