Adding SWIPE functionality to a LIGHTBOX?

Question

I'm sure that this is probably not to difficult to do, but I'm not very experienced with Javascript and could really use some pointers!

I have implemented NIVO LIGHTBOX http://dev7studios.com/plugins/nivo-lightbox/ (by the same makers of Nivo Slider) on my website and now want to enable touch / swipe gestures for this plugin so that someone can navigate if they visit my site on a ipad/iphone etc.

1) what touch library should I use? There seem to be a lot, and I'm not sure which one is best or easiest to use? I only want to have single finger, left and right swipe functionality for navigation. a minimum swipe (ie 50px) to active the navigation is probably a good idea as well.

2) What do I need to put in the header? (please help me out by providing some specific code if you can). I assume that I'll need: - Link to plugin (I'm okay with how to do this) - What code is required to fire off the touch gestures?

3) How do I link the DIV or IMG tag for the lightbox to the so that it works?

4) Ideally I'd also like to hide the navigation arrows if a touch device is detected?

My website is here: http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

Many thanks for your assitance.

Answer 1

This approach worked for me: http://www.janes.co.za/easy-ipad-gestures-in-your-website-with-jquery/

Below is the code I added to my Functions.php to add in the necessary javascript:

function child_theme_head_script() { 
?>      
<script src="<?php bloginfo('stylesheet_directory') ?>/js/jquery.touchwipe.min.js"></script>

<script>    
    jQuery(document).ready(function(){
        jQuery('body').touchwipe({
            wipeLeft: function(){ jQuery(".nivo-lightbox-next").click(); },
            wipeRight: function(){ jQuery(".nivo-lightbox-prev").click(); },
             min_move_x: 20,
             min_move_y: 20,
             preventDefaultEvents: false
        })
    });
    </script>
<?php 
}
add_action( 'wp_head', 'child_theme_head_script' );