Photoswipe Пользовательская кнопка

Question

Можно ли добавить кнопку к Photoswipe? Я знаю, что я могу сделать нажатие кнопки на кнопку, но тогда я не могу изменить значок кнопки. Можно ли просто добавить новую кнопку, которая печатает изображение с помощью обычного java-скрипта funktion 'print'?

Answer 1

Я делаю что-то подобное с кнопкой загрузки.

Добавить новую кнопку:

<button class="pswp__button pswp__button--download" title="Download" onclick="download()"></button> 

В вашем CSS:

.pswp__button--download, .pswp__button--download:before { 
    background: url('/path/to/image') 12px 12px no-repeat; 
    background-size: 20px 20px; 
    width: 44px; 
    height: 44px; 
} 

12px 12px является смещение изображения, чтобы помочь в центр. Отрегулируйте это и background-size при необходимости.

Держите высоту и ширину так, чтобы она была той же величины, что и панель инструментов.

Answer 2

Недавние версии Photoswipe (4.1.0, 4.1.1), похоже, требуют от вас настройки, чтобы добавить новую кнопку. Просто добавив кнопку в html и стиль, который он надлежащим образом работал в большинстве браузеров, но не в Android, где Photoswipe не позволяет событию запускать вашу кнопку.

Вот пример добавления , например,.

Добавить кнопку, где другие кнопки размещены в вашем HTML:

<button class="pswp__button pswp__button--like" title="Like"></button> 

Photoswipe использует CSS свойства фона, чтобы добавить иконки их кнопки, так что вы можете сделать что-то подобное в вашем файле CSS:

.pswp__button--like { 
    background: url(like.png) 0 0 no-repeat; 
    background-size: 44px 44px; 
} 

Файл like.png имел бы значок вашей кнопки. Я делал что-то по-другому, так как я использовал значок на основе шрифта, поэтому вместо использования свойства background я добавил контент в свой <button>. Если вы делаете, что вам нужно переопределить фон по умолчанию, добавляя что-то вроде этого в ваш CSS:

.pswp__button--like { 
    background: inherit !important; 
} 

Чтобы заставить его работать на Android, то вы должны отредактировать photoswipe-UI-defaults.js и добавить вход для кнопки в _uiElements так:

{ 
    name: 'button--like', 
    option: 'likeEl', 
    onTap: function() { 
     // handle your button click event here 
    } 
} 

не забудьте обновить photoswipe-UI-defaults.min.js, если вы используете его.

Наконец, где вы инициализировать photoswipe в JavaScript, добавьте параметр

likeEl: true 

Если пропустить этот последний шаг, ваша кнопка не будет активирована.