javascript - 向 LIGHTBOX 添加 SWIPE 功能？

Question

我确信这可能不难做到，但我对 Javascript 不是很有经验，确实需要一些指导!

我已经实现了 NIVO LIGHTBOX http://dev7studios.com/plugins/nivo-lightbox/ (由 Nivo Slider 的同一制造商提供)在我的网站上，现在想为此插件启用触摸/滑动手势，以便有人在使用 ipad/iphone 等访问我的网站时可以导航。

1) 我应该使用什么触摸库？似乎有很多，我不确定哪个最好或最容易使用？我只想用单指、左右滑动功能进行导航。最小滑动(即 50 像素)以激活导航可能也是一个好主意。

2) 我需要在页眉中添加什么？ (如果可以的话，请提供一些特定的代码来帮助我)。我假设我需要: - 链接到插件(我知道怎么做) - 触发触摸手势需要什么代码？

3) 如何将灯箱的 DIV 或 IMG 标签链接到 以便其正常工作？

4) 理想情况下，如果检测到触摸设备，我还想隐藏导航箭头吗？

我的网站在这里:http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

非常感谢您的协助。

Answer 1

这种方法对我有用:http://www.janes.co.za/easy-ipad-gestures-in-your-website-with-jquery/

下面是我添加到我的 Functions.php 中以添加必要的 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' );