Custom button on photo

[nanom1t]

Hi,

Thank you for this awesome library. However it is difficult for me to customize it. I just want to add two buttons over photo. For example, like here: How can I do this? Should I modify the source code? I think that it is not the best way. I've tried to do something like this, but it corrupts UI:

gallery.listen('gettingData', function(index, item) {
        if(index === 3) {
            item.html = '<div><img class="pswp__img" src="//photo.jpg" style="display: block; width: 331px; height: 662px;"></div>';
        }
    });

Please help me. Thanks.

[nanom1t]

How to remove images from PhotoSwipe on the "fly" via delete button during preview process?

[gep13]

@nanom1t I would love to hear if you get a solution for this, as I am currently looking at doing the same thing.

[nanom1t]

@gep13 not yet :(

[nanom1t]

I've added remove button to template and defined button in photoswipe-ui.js:

<div class="pswp__top-bar">
  <button class="btn btn-sm btn-warning pswp__button--remove">Remove</button>
</div>

        {
            name: 'button--remove',
            option: 'removeEl',
            onTap: function() {
                pswp.shout('removePhoto', pswp.currItem, pswp.getCurrentIndex());
            }
        }

Now I'm listening removePhoto event and trying to remove current photo from PhotoSwipe:

                    photoSwipe.listen('removePhoto', function (item, index) {
                        if (this.items && item && index > -1) {
                            if (this.items.length == 1) {
                                this.close();
                            } else if (this.items.length > 1) {
                                this.next();
                                this.items.splice(index, 1);
                                this.invalidateCurrItems();
                                this.updateSize(true);
                                this.ui.update();
                            }
                        }
                    });

It works somehow, but sometimes removePhoto event not firing or I get an error in console:

photoswipe.min.js:4 Uncaught TypeError: Cannot create property 'h' on boolean 'false'
    at ic (photoswipe.min.js:4)
    at a.updateCurrItem (photoswipe.min.js:4)
    at a.goTo (photoswipe.min.js:4)
    at Object.next [as onTap] (photoswipe.min.js:4)
    at HTMLDivElement.x (photoswipe-ui.min.js:1)
    at qc (photoswipe.min.js:4)
    at a.onTapRelease (photoswipe.min.js:4)
    at Da (photoswipe.min.js:4)
    at Object.Rb [as mouseup] (photoswipe.min.js:4)
    at a.handleEvent (photoswipe.min.js:4)

@dimsemenov Could you please help with this?

Thanks