将SWIPE功能添加到Nivo Lightbox?

时间:2014-05-22 12:17:17

标签: jquery iframe lightbox swipe nivo-slider

我在我正在处理的网站上使用了http://dev7studios.com/plugins/nivo-lightbox/提供的Nivo Lightbox,而且在图库模式下我似乎无法触摸幻灯片/滑动。

我环顾四周,无法在网上找到可行的答案。我找到的两个,没有用,或者我说我不能让他们工作。我知道这个功能可以在这个网站上运行起来:www.imageworkshop.com/2013/06/19/dance-performer-promo-photography /

提前感谢任何对此做出回应的人。

http://crazyway.tv/test1/videos.php

更新!

我设法让滑动部分工作,仅在灯箱内容的上方和下方

<script type="text/javascript"> 
    jQuery(document).ready(function(){
        jQuery('body').touchwipe({
            wipeLeft: function(){ jQuery(".nivo-lightbox-next").click(); },
            wipeRight: function(){ jQuery(".nivo-lightbox-prev").click(); },
             min_move_x: 70,
             min_move_y: 70,                 
             preventDefaultEvents: false                 
        });
    });     
    </script>

我相信问题是让它在iframe上工作......

1 个答案:

答案 0 :(得分:0)

使用此插件:https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

要使用的代码:

$(function(){
    var addSwipeTo = function(selector) {  
        $(selector).swipe("destroy");
        $(selector).swipe({
            swipe:function(event, direction, distance, duration, fingerCount, fingerData) {
                if (direction == "left") {
                    $(".nivo-lightbox-next").trigger("click");
                }
                if (direction == "right") {
                    $(".nivo-lightbox-prev").trigger("click");
                }
            }
        });
    };

    $(document).on('click', ".lightbox", function(){
       addSwipeTo(".nivo-lightbox-overlay");
    });
 });