Support for swipe gestures?

[ms-studio]

Colorbox rocks and is my favorite gallery script!

But it would be sweet if it would support swipe gestures for sliding images left and right, on tablet computers. Depending how the CSS styles the "prev / next" buttons, they can be quite tiny on a touchscreen. Allowing for swipe gestures would be very intuitive, improving the user experience.

I'm currently trying to add that functionality to Colorbox by using a little script that usually works fine for me, jquery.touchwipe: http://www.netcu.de/jquery-touchwipe-iphone-ipad-library

But I find myself unable to make it work with dynamic content, using the on.() method, so I can't use it with Colorbox.

Therefore my suggestion: what about adding some basic support for left/right swipe gestures to the Colorbox core?

[jackmoore]

Hi, responded to you on twitter before I noticed this issue. I haven't tried this before, but it sounds like you are on track. I don't know why you weren't able to make things work with jquery.touchwipe, but I typically don't use JavaScript libraries if they aren't on github because I have no idea if they've been vetted/used by other people, or are riddled with bugs. Looking at Hammer.js's documentation, it looks like it would be something like this:

$(document).ready(function(){
    $(document).on('cbox_open', function(){
        Hammer(document.body).on("swipeleft", $.colorbox.prev);
        Hammer(document.body).on("swiperight", $.colorbox.next);
    });
    $(document).on('cbox_closed', function(){
        Hammer(document.body).off("swipeleft", $.colorbox.prev);
        Hammer(document.body).off("swiperight", $.colorbox.next);
    });
});

However, I don't have an iOS device (just the iphone simulator on my Macbook), and I had terrible results because I couldn't trigger the 'swipeleft' and 'swiperight' gestures reliably. And I had to turn off things like overlayClose so it wouldn't accidentally be triggered, and I guess a div should be placed over the photo so it won't accidentally be dragged around.

By default clicking on the photo will advance to the next photo. As for buttons being too small.. it's just CSS. You can make the hitbox for each take up half the screen if you want (top:0; width:50% height:100; position:fixed) or half of colorbox (top: 0; width:50% height:100% position:absolute). I will consider looking into this more if there is more demand for it, but right now gestures seem like a second-rate solution.

[ms-studio]

Thanks a lot for that information! If I don't get it to work, I will give hammer.js a try.

My reason for choosing the unmaintained jquery.touchwipe was simply that (a) it works fine on static content, (b) it's only 82 lines/2kb, while hammer.js has 1500 lines/49kb.

I also launched a thread on stackoverflow: http://stackoverflow.com/questions/15838042/jquery-touchwipe-with-dynamic-content - maybe that will bring up a solution.

Of course you are right about the CSS solution (which I customized anyway) and the click-for-next, but my impression when testing on an iPad is that the swipe movement is easier and more "device native", so it's typically the first thing a user will try. If it works, it's a really nice bonus :)

[carasmo]

If anyone can share this, if they get it working with swipe and also responsive, that would rock!

[bearded-avenger]

Just pulled this off with touchswipe.js. Here's what I used.

        jQuery("#colorbox").swipe( {
            //Generic swipe handler for all directions
            swipeLeft:function(event, direction, distance, duration, fingerCount) {
               jQuery.colorbox.prev();
            },
            swipeRight:function(event, direction, distance, duration, fingerCount) {
               jQuery.colorbox.next();
            },
            //Default is 75px, set to 0 for demo so any distance triggers swipe
           threshold:0
        });

[carasmo]

@bearded-avenger Thank you SO awesomely much. I really love that TouchSwipe but had no clue how to get it to work. It works great!!!

[ghost]

Reposting @bearded-avenger's code with syntax highlighting:

        jQuery("#colorbox").swipe( {
            //Generic swipe handler for all directions
            swipeLeft:function(event, direction, distance, duration, fingerCount) {
               jQuery.colorbox.prev();
            },
            swipeRight:function(event, direction, distance, duration, fingerCount) {
               jQuery.colorbox.next();
            },
            //Default is 75px, set to 0 for demo so any distance triggers swipe
           threshold:0
        });

[andyspocket]

Trying to get this to function. I've add link to the touchwipe js and then added the js script as you show it above. Nothing. Am I missing something? Do you show a link to a working example? ... I am running Jquery. Do I need any other plug ins? Any specific load order? Thanks!

[bognarlaszlo]

Try with document ready:

jQuery(document).ready("#colorbox").swipe( {

[andyspocket]

Thanks! Can you link to a working example? I'm still having issues on my side.

Thanks, Andy Foote Drum Supply House USA http://www.DrumMaker.com 615-251-1146

On Wed, Nov 6, 2013 at 5:27 AM, godot882 [email protected] wrote:

Hi andyspocket! Had the same issue, it worked for me like this:

jQuery(document).ready("#colorbox").swipe( { //Generic swipe handler for all directions swipeLeft:function(event, direction, distance, duration, fingerCount) { jQuery..colorbox.prev = function () { index = getIndex(-1); $related[index].click(); }; }, swipeRight:function(event, direction, distance, duration, fingerCount) { jQuery.colorbox.next = function () { index = getIndex(1); $related[index].click(); }; }, //Default is 75px, set to 0 for demo so any distance triggers swipe threshold:0 });

— Reply to this email directly or view it on GitHubhttps://github.com/jackmoore/colorbox/issues/395#issuecomment-27865028 .

[bognarlaszlo]

Sorry. Haven't been here for a while. Sadly I don't have working online example at the time. What issues? Maybe I can help.

[tlehtimaki]

@jackmoore Just a quick note that in the hammer.js example next and previous should change place, as swiping left simulates next.

// I have changed the place of .next and .prev in comparison to @jackmoore exapmle  to correspond the logic of swiping
$(document).ready(function(){
    $(document).on('cbox_open', function(){
        Hammer(document.body).on("swipeleft", $.colorbox.next);
        Hammer(document.body).on("swiperight", $.colorbox.prev);
    });
    $(document).on('cbox_closed', function(){
        Hammer(document.body).off("swipeleft", $.colorbox.next);
        Hammer(document.body).off("swiperight", $.colorbox.prev);
    });
}); 

[ghost]

@jackmoore Where would you implent this piece of code? In the jquery.colorbox.js?

[AndrewBerezin]

I use @bearded-avenger's code with my bind to cbox_open event:

  jQuery(document).bind('cbox_open', function(){
    jQuery("#colorbox").swipe( {
      //Generic swipe handler for all directions
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
        jQuery.colorbox.prev();
      },
      swipeRight:function(event, direction, distance, duration, fingerCount) {
        jQuery.colorbox.next();
      },
      //Default is 75px, set to 0 for demo so any distance triggers swipe
      threshold:0
    });
  });

[justb3a]

@bearded-avenger's code works like a charm using TouchSwipe.js. Thanks a lot.

[jstranger]

Sorry but I am just not getting it - what is the element with id of colorbox in the posts above? Is it a user-created element or one inserted by Colorbox itself? I have tried wrapping the whole body in a div and then using its id in the jQuery(...).swipe but no good. Could someone please post a simple working example?

[jstranger]

Resolved the first issue - hadn't realised CDN urls were case-sensitive. But the suggested solution doesn't work on a Microsoft Surface 2 running Windows 8.1 and IE11 even after using -ms-touch-action:none. Seems to be a common problem with jQuery plugins and such devices.

[joergsteinhauer]

excellent @bearded-avenger ! thanx for this hotfix, works for me.

[jstranger]

Has anyone got any of the above to work on a Windows tablet? If so then I will take another look, but I would rather not waste my time if not.

[francisngo]

@bearded-avenger doesnt work for me. When I added the code, my slidejs stopped working. I also tried to add @AndrewBerezin code with bind to cbox_open event but swipe feature doesnt work.

  $(document).bind('cbox_open', function(){
    $('a.lightbox').swipe({
      //generic swipe handler for all directions
      swipeLeft:function(event, direction, distance, duration, fingerCount) {
        $.colorbox.prev();
      },
      swipeRight:function(event, direction, distance, duration, fingerCount) {
        $.colorbox.next();
      },
      //default is 75px, set to 0 for demo so any distance triggers swipe
      threshold:0
    });
  });

I have this script inserted internally.

[AdamFonagy]

In my experience solutions described upper didn't work in case I had an iframe with its html content in the lightbox. To resolve such a case I've added the swipeleft/swiperight event listener to the body of the content loaded into the iframe but I've called the parent's colorbox methods like this:

Hammer(document.body).on("swipeleft", parent.$.colorbox.next);
Hammer(document.body).on("swiperight", parent.$.colorbox.prev);

or

$(document.body).swipe( {
    //Generic swipe handler for all directions
    swipeLeft:function(event, direction, distance, duration, fingerCount) {
        parent.$.colorbox.prev();
    },
    swipeRight:function(event, direction, distance, duration, fingerCount) {
        parent.$.colorbox.next();
    },
    //Default is 75px, set to 0 for demo so any distance triggers swipe
    threshold:0
});

So it is important to add this code to the content inner the iframe and call the appropriate method of the parent window like this: parent.$.colorbox.next();

@francisngo it may helps you too.

Have fun!

[Leon-001]

Hey all, I have used the code from @bearded-avenger. This works great for me. Thanks! Anyone looking for a live example: https://www.fairtragen.de/product_info.php?cPath=6&products_id=61021