Close Button Clicks Items Behind It, Possibly Causing Infinite Loop

[HowdyMcGee]

Whenever you click the [X] button at the top right it'll click whatever is behind it too which can cause in infinite loop if another swipebox image is also behind the exit button. This ensures that you can't ever really exit swipebox. If a link is behind the [X] it'll follow that link instead.

It may have something to do with a window resize listener I have somewhere else in my scripts but in the closeSlide function if I destroy at the top before anything else, including resize, the swipebox closes just fine.

[Dredy]

Hi, same problem here: the close button is positioned at right top of the page, just over my "logoff" button... :-/ Every time i click the close button (Chrome F12 in tablet mode) it raises even the Logoff button event.

My temporary workaroud:

1. hide the original button via CSS

2. create a specific button (z-index: 10000 because the swipebox has 99999) and place it on the page initally with display:none

3. attach to the "on" event in JQuery for my button and raise the $('#swipebox-close').click() manually

$('.my-close-button').show().on('touchend click', function (e) {
                e.preventDefault(); //prevent default behavior
                $('.my-close-button').hide();
                $('#swipebox-close').click();
            });

[matteo1990]

My temporary workaroud: adding a setTimeout to the function that closes the image. Something like:

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

[Benhmed]

Hi, Well i figured out that something was missing on the event binding for the close action (cf. swipebox/blob/master/src/js/jquery.swipebox.js lines: 587 to 589 ) replacing it with the following shld do the trick: $( '#swipebox-close' ).bind( action, function( event ) { event.preventDefault(); event.stopPropagation(); $this.closeSlide(); } );

[saschanos]

To not modify existing code, do the following:

$("selector").swipebox({
      afterOpen: function(){
        var $selectorClose = $("#swipebox-close");
        var clickAction = "touchend click";

        $selectorClose.unbind(clickAction);

        $selectorClose.bind(clickAction, function(event){
          event.preventDefault();
          event.stopPropagation();

          $.swipebox.close();
        });
      }
    });

[JonatanJJ]

This issue only seems to occur with touch events.

I am getting this issue on Android with Chrome, and on desktop when using Chrome dev tools "Responsive mode". Works fine when using Chrome on desktop normally.

[ozggur]

Hi, When we opened the site with chrome on the mobile version, the close button did not work in the gallery I solved the problem. framework-plugins.js lines:317 n("#swipebox-close").bind("click touchend", function (t) { }) modify to: n("#swipebox-close").bind("click touchend", function (t) { var t = this; n(e).trigger("resize"); n("html").removeClass("swipebox"); n(e).unbind("keyup"); n("body").unbind("touchstart"); n("body").unbind("touchmove"); n("body").unbind("touchend"); n("#swipebox-slider").unbind(); n("#swipebox-overlay").remove(); a.removeData("_swipebox"); t.target.trigger("swipebox-destroy") }) its working