Photoswipe Custom Button

Question

Is it possible to add a button to Photoswipe? I know that I can make a on-click event to a button, but then i can't change the button-icon. Is it possible to just add a new button that print the picture with the normal java script funktion 'print' ?

Answer 1

Recent versions of Photoswipe (4.1.0, 4.1.1) seem to require you to actually customize it to add a new button. Just adding the button in the html and styling it appropriately worked on most browsers, but not Android, where Photoswipe does not let the event through to trigger your button.

Here's an example of adding a like button.

Add your button to where the other buttons are placed in your html:

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

Photoswipe uses the css background property to add icons to their buttons, so you can do something like this in your css file:

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

The file like.png would have your button icon in it. I did things differently since I was using a font-based icon, so rather than using the background property I added content to my <button> . If you do that you need to override the default background by adding something like this to your css:

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

To get it to work on Android, you then need to edit photoswipe-ui-defaults.js and add an entry for your button in _uiElements like this:

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

Don't forget to update photoswipe-ui-defaults.min.js if you are using it.

Finally, where you initialize photoswipe in javascript, add the option

likeEl: true

If you skip this last step your button won't be activated.

Answer 2

I am doing something similar with a download button.

Add a new button:

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

In your 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;
}

The 12px 12px is the offset for the image to help center it. Adjust this and the background-size as needed.

Keep the hight and width as is to keep it the same size as the toolbar.