Как добавить кнопку в PhotoSwipe?

Question

Я сделал кожу Jalbum PhotoSwipe на основе галереи Javascript PhotoSwipe (см: http://jalbum.net/nl/skins/skin/PhotoSwipe и адаптированный образец альбома: http://andrewolff.jalbum.net/Reestdal_PSB/)

Я хотел бы добавить дополнительную кнопку, чтобы показать или скрыть данные Exif фотографии.

Сначала я пытался добавить стандартную кнопку в правом верхнем углу, как сообщил Дмитрий Семенов, см https://github.com/dimsemenov/PhotoSwipe/issues/802 Хотя я понятия не имею, как добавить кнопку спрайт по умолчанию-skin.png и по умолчанию кожи. svg, вы видите дополнительную кнопку с тем же изображением, что и значок «Полный экран» в верхнем правом углу на ПК с Windows 10, см. http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5 На сенсорном экране, таком как iPad, этот значок «Полный экран» теперь также отображается (отсутствует без этой модификации). Нажмите на эту кнопку на ПК и на iPad, и вы увидите, что данные Exif появятся и исчезнут, вы снова нажмете эту кнопку. Таким образом, это работает правильно, но трудно изменить изображение.

Далее я попытался добавить кнопку обычным способом с помощью exif.png imjage. Я добавить в < DIV класс = «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 класс = "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 работала также на устройстве с сенсорным экраном?

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, но не для Android таблетки, а также не для Windows PC. Вы видите результат как Play buttun, слева от кнопки паузы на странице http://andrewolff.jalbum.net/Reestdal_PSB/#&gid=1&pid=5

Я использую эту кнопку, чтобы начать слайд шоу, как вы можете видеть в Jalbum PhotsSwipe образец кожи альбоме: http://andrewolff.jalbum.net/Reestdal_PS/