If there's any clickable image behind the X, it loads the image instead of closing

[damian5000]

Anytime there's a clickable image behind the X, it loads the image tapped behind the X instead of exiting Swipebox.

Mostly a big problem with galleries. Makes it very difficult for user to exit. Yes, they could swipe up, but the glaring X is invariably what they'll be trying.

Would love to see this solved.

[olibp]

+1 it's reloading the whole page in my case because of a link behind the close button (on mobile only). Users can't always figure out the swipe up/down when no X is shown, so they ends up clicking reload or back instead.

[scrobbleme]

Workaround, change closeSlide to (add event.preventDefault):

closeSlide : function () {
    $( 'html' ).removeClass( 'swipebox-html' );
    $( 'html' ).removeClass( 'swipebox-touch' );
    $( window ).trigger( 'resize' );
    this.destroy();
    if(event){
        event.preventDefault();
    }
},

[thimolor]

Hi, I 'am getting this error in Chrome after I changed closeSlide:

"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive."

How can I fix this? Thanks.

[intsfanatic]

Having the same issue. The code above works, but gives an error in the console after closing: "Unable to preventDefault inside passive event listener due to target being treated as passive."

[sparky-vision]

+1, I'm having the same issue with mobile browsers. I have a large gallery, and the X simply doesn't work if there's a clickable link behind it, leading to being unable to exit the gallery without reloading the page.

[edit] I thought maybe I could make an ugly hack to get around this by disabling SVGs, and replacing the transparent PNGs with JPGs, in case the click event wasn't being "seen" by the pixels, but this doesn't work, either. The code above doesn't work for me, either.

[edit 2] Actually, everything goes "through" the opened image, to the page below, including scrolling, which makes this extremely unusable on mobile Safari. (Probably other browsers, too, but I haven't tested those.

[edit 3] This code that I found works: https://github.com/brutaldesign/swipebox/issues/331#issuecomment-320679543

[LittleTux75]

if at https://github.com/brutaldesign/swipebox/blob/master/src/js/jquery.swipebox.js (Swipebox v1.4.4)

line 587

            $( '#swipebox-close' ).bind( action, function() {
                $this.closeSlide();
            } );

you change the code to

            $( '#swipebox-close' ).bind( action, function(event) {
                event.preventDefault();
                event.stopPropagation();
                $this.closeSlide();
            } );

this prevent to propagate the touch event to another underlying swipebox element on mobile device and consequently reopen the slideshow