Question

我有一个网站，我在其上使用了几个灯箱。它在任何地方都很好用，也在IE7 :)中，但在移动设备中它并没有显示关闭按钮。

我的代码如下：

    $(".fancybox").fancybox({
    beforeShow:function(){
        $('html, body').unbind("mousewheel", horizontalScroll);
    },
    'arrows':true,
    'overlayShow': true,
    'autoScale': true,
    'autoDimensions': false,
    'modal': true,
    'autoSize' : false,
    'width' : '90%',
    'showCloseButton' : true,
    'hideOnOverlayClick':true,
    'keys': {
        "next": [13, 32, 34, 39], // enter, space, page down, right arrow, down arrow
        "prev": [8, 33, 37] // backspace, page up, left arrow, up arrow

    },
     afterShow : function() {
        $('.fancybox-skin').append('<a title="Close" class="fancybox-item fancybox-close" href="javascript:jQuery.fancybox.close();"></a>');

    },
    afterClose : function() {
        $('html, body').bind("mousewheel", horizontalScroll);
     }
});

网站是：http://ahnenwand.hiltl.ch但并非所有图片都链接到灯箱。点击加号，从右侧向右走3，向下看8，有一个图像打开灯箱进行测试。

我没有任何JS错误，精灵也在加载。在灯箱的右上角（在移动设备上）是我可以单击以关闭它的区域，但关闭按钮不会显示。

这里有点小提琴，这里的关闭按钮也不会出现在手机上（它只能运行一次然后必须重新加载 - 对不起）

http://jsfiddle.net/bauralex/f2sx36gz/16/

我希望任何人都有一个想法，这可能是错的

非常感谢

亚历

Answer 1

我对非模态框（V 2.1.5）也有同样的问题。正如我所知，移动环境中缺少关闭按钮的代码，并且引用背景图像并不起作用。我的解决方案是通过afterLoad回调进行更改：

afterLoad:function(curr, prev) {
    if(!jQuery('a.fancybox-close').length) {
        jQuery('.fancybox-outer').after('<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>');
        jQuery('.fancybox-close').css('background-image','url(/js/fancybox2/fancybox_sprite.png)');
    }
}

确保调整环境中fancybox_sprite.png的路径。

Fancybox 2.1.5在移动设备上不显示关闭按钮

1 个答案: