brutaldesign / swipebox

A touchable jQuery lightbox
1.96k stars 667 forks source link

Jquery Mobile / touch being overridden #257

Open RaefWolfe opened 8 years ago

RaefWolfe commented 8 years ago

Hello,

I'm new to jQuery and javascript so bear with me.

I'm using jQuery Mobile on a site to swipe left and right between pages. It works just fine, up until I click on an image to run Swipebox. Swipebox runs perfectly - no problems there! However, once I close out of Swipebox and continue to try to swipe my website, the jQuery Mobile swipe functionality is broken.

It's only broken on a mobile device, not on desktop. I can manually click through on a desktop and have no issues closing out and dragging to swipe through the site (as awkward as it is on desktop). So that tells me it's something with the Swipebox code that's for mobile devices.

Is there a way to TOTALLY "kill" swipebox? It's clearly doing something to override my other jQuery Mobile code. So how do I tell my site "ignore everything Swipebox told you and go to defaults"? Alternatively, is there a way to reinitialize my jQuery Mobile code after closing Swipebox? Putting my code into the destroy function had no effect.

Here is the site in question, if it helps: http://jen.widrick.net/masterimages/graphic-design.html On desktop, it's best to view it at below 1024 pixels wide (you'll hit a mobile view instead of the ugly looking desktop thing).

Cheers!

ricardouffcomp commented 8 years ago

I was having the same issue using Kendo UI Mobile. It is caused by an small issue in the "jquery.swipebox.js" code. I fixed that using the following steps:

$( 'body' ).unbind( 'touchstart' ); $( 'body' ).unbind( 'touchmove' ); $( 'body' ).unbind( 'touchend' );

You should replace this code with:

var swipeboxContainer = $('#swipebox-container'); swipeboxContainer.unbind('touchstart'); swipeboxContainer.unbind('touchmove'); swipeboxContainer.unbind('touchend');

Now find the following line:

$( 'body' ).bind( 'touchstart', function( event ) {

Replace with:

$('#swipebox-container').bind('touchstart', function (event) {

As you can see the problem was that the event touchstart / touchmove / touchend need to be binded to the scope of the swipebox-container instead of the body of the html.

I hope it helps.

Cheers, Ricardo Goncalves