Add touch support to jQuery FancyBox 1.3.4

December 12, 2012 by Michael

I’m using jQuery FancyBox on dailyfratze.de. I still use version 1.3.4 which is released under MIT and GPL license, if i remember correctly version 2 has not been always available under an open license but i’m maybe wrong. But nevertheless, version 2 also lacks touch support like 1.3.4 does.

This can be changed if you’re using Modernizr for detecting HTML5 and CSS3 features and also very small jQuery Touchwipe Plugin (there maybe more feature rich plugins but for the given goal, this is enough).

The change is pretty simple and the core of it is:

if(Modernizr.touch)
	content.touchwipe({
	     wipeLeft: function() { $.fancybox.next(); },
	     wipeRight: function() { $.fancybox.prev() },		     
	     min_move_x: 20,
	     min_move_y: 20,
	     preventDefaultEvents: true
	});

On wipe left show the next picture in a gallery, on wipe right the previous. There’s some more to disable the default click handlers, but i don’t want to bore you.

Here is a version of FancyBox already patched: jquery.fancybox-1.3.4.with_touch_support.js and here is a unified patch: jquery.fancybox-1.3.4.touch_support.patch.

Don’t forget to include modernizr with touch event support and jquery-touchwipe. To see how it works, visit dailyfratze.de and touch one of the the little magnifiers.

4 comments

  1. Yohey wrote:

    Just wanted to say thank you so much for posting this! All the best!

    Posted on August 22, 2014 at 12:53 AM | Permalink
  2. Yohey wrote:

    Hello again.

    Is there a way to make the swipe gallery cyclic/loop? I have cyclic set to true and the gallery loops on desktops but does not devices.

    Kind of got my eye on this area:

    $.fancybox.next = function() {
    return $.fancybox.pos( currentIndex + 1);
    };

    $.fancybox.prev = function() {
    return $.fancybox.pos( currentIndex – 1);
    };

    but I’m a coding novice. Been at it but not even sure I’m going about it in the right way. Would appreciate any info.

    Thank you for your time.

    Posted on August 22, 2014 at 4:13 AM | Permalink
  3. Michael wrote:

    Hello Yohey,

    Thanks for your feedback.

    i don’t know… Didn’t have the need for this functionality.

    Posted on August 22, 2014 at 5:53 PM | Permalink
  4. Love Huria wrote:

    Check out this one:

    jQuery(document).ready(function() {
    jQuery(‘.fancybox’).fancybox({
    afterShow: function() {
    jQuery(‘.fancybox-wrap’).swipe({
    swipe : function(event, direction) {
    if (direction === ‘left’ || direction === ‘up’) {
    alert(‘Left’);
    //jQuery.fancybox.prev();
    } else {
    alert(‘Right’);
    //jQuery.fancybox.next();
    }
    }
    });
    }
    });
    });

    Posted on October 30, 2014 at 11:45 AM | Permalink
Post a Comment

Your email is never published. We need your name and email address only for verifying a legitimate comment. For more information, a copy of your saved data or a request to delete any data under this address, please send a short notice to michael@simons.ac from the address you used to comment on this entry.
By entering and submitting a comment, wether with or without name or email address, you'll agree that all data you have entered including your IP address will be checked and stored for a limited time by Automattic Inc., 60 29th Street #343, San Francisco, CA 94110-4929, USA. only for the purpose of avoiding spam. You can deny further storage of your data by sending an email to support@wordpress.com, with subject “Deletion of Data stored by Akismet”.
Required fields are marked *