【问题标题】:Adding SWIPE functionality to a Nivo Lightbox?向 Nivo Lightbox 添加 SWIPE 功能?
【发布时间】:2014-05-22 12:17:17
【问题描述】:

我在我正在处理的网站上使用了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 上运行......

【问题讨论】:

标签: jquery iframe lightbox swipe nivo-slider


【解决方案1】:

使用这个插件: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");
    });
 });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-09-07
    • 2017-12-06
    • 1970-01-01
    • 2012-07-22
    相关资源
    最近更新 更多