灯箱不适合移动设备

Question

光盘在电脑上很棒.

然而,情况是:我已经从Android和iPhone用户那里得到各种关于Lightbox在移动设备上关于他们如何无法放大灯箱内较大图像的投诉,因为Lightbox会在屏幕上跳转并且不会保持居中.

还有其他几个问题.如果您有移动设备,请继续查看我的网站以查看我在说什么:http://soullow.com/store/index.php？m...products_id = 86点击放大的图片并尝试放大并在屏幕上移动.

问题是我没有时间找到嵌入代码的解决方案,使Lightbox Mobile Browser变得友好.

有没有人遇到这个问题,有解决方案,建议或其他什么？

Answer 1

有几种响应式灯箱替代方案，但我个人最喜欢的是Fancybox2 (http://fancyapps.com/fancybox/)。

但这种方法会发送较大的图像，然后将其缩小以适合用户的屏幕尺寸。这既浪费带宽，也不允许用户使用手机上的原生捏合手势放大图像。

我建议手机用户完全绕过灯箱，直接向他们发送图像文件。例如，Zappos 移动网站就是这样做的。

这是我用 Fancybox2 构建的示例：http://jsfiddle.net/alexroper/5s6dv/

jQuery 看起来像这样。您必须根据您想要手机甚至平板电脑用户的行为类型来更新视口大小。

$(document).ready(function() {
    // initialize the lightbox 
    $('.fancybox').fancybox({
        beforeLoad: function() {
            var windowsize = $(window).width();
            // test the viewport size to see if it's smaller than 480px
            if (windowsize < 480) {
                // cancel the lightbox and load the link url
                $.fancybox.cancel();
            }
        }
    });
});