6

灯箱在电脑上很棒。

然而，情况是：我收到了来自 Android 和 iPhone 用户的各种抱怨，他们抱怨他们的移动设备上的 Lightbox，因为 Lightbox 会在屏幕上跳来跳去而不是居中，所以他们无法放大 Lightbox 中的较大图像。

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

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

有没有人遇到这个问题，有解决方案，建议或任何东西？

4

2 回答 2

3

有几种响应式灯箱替代品，但我个人最喜欢的是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();
            }
        }
    });
});
于 2012-10-23T06:47:15.997 回答
1

似乎 JavaScript 中的大多数 lightbox/shadowbox/modal 对话框库都依赖 body.clientWidth 和 clientHeight 来计算图像或对话框的大小和位置。

在移动浏览器中，clientWidth 比 screen.Width 宽，这保留了格式，并允许用户缩放和平移页面。一个可靠的解决方法是使用 body.clientWidth 来计算模态元素的大小和位置，但是当它小于 body.clientWidth 时回退到使用 screen.Width

现在解释一下：模态元素跳动的原因是它的位置是由两倍于屏幕大小的文档宽度计算的，并且它添加了滚动位置使其“居中”。因此，当您平移模式时，滚动值会将其推向该方向更远。

于 2015-03-05T03:08:58.810 回答