將SWIPE功能添加到LIGHTBOX？

我相信這可能不難做到，但我對JavaScript並不是很有經驗，並且真的可以使用一些指針！將SWIPE功能添加到LIGHTBOX？

我在我的網站上實現了NIVO LIGHTBOX http://dev7studios.com/plugins/nivo-lightbox/（由Nivo Slider的相同製造商），並且現在想要爲這個插件啓用觸摸/滑動手勢，以便有人可以導航，如果他們通過ipad/iphone等訪問我的網站。

1）我應該使用什麼觸摸庫？似乎有很多，我不確定哪一個最好或最容易使用？我只想使用單指，左右滑動功能進行導航。最小滑動（即50px）來激活導航也可能是一個好主意。

2）我需要在標題中放什麼？（如果可以，請提供一些特定的代碼，以幫助我）。我假設我需要： - 鏈接到插件（我沒關係如何做到這一點） - 觸發手勢需要什麼代碼？

3）我如何鏈接燈箱的DIV或IMG標籤，以便它的作品？

4）理想情況下，如果檢測到觸摸設備，我還想隱藏導航箭頭？

我的網站是在這裏：http://www.sandbox.imageworkshop.com/projects/william-angliss-institute/

您assitance非常感謝。

來源

2013-11-14 Gearu

這種方式爲我工作：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');

來源

2013-11-24 08:35:35 Gearu

將SWIPE功能添加到LIGHTBOX？

回答

相關問題