6

ライトボックスはPCで素晴らしいです。

ただし、状況は次のとおりです。ライトボックスが画面上でジャンプし、中央に留まらないため、ライトボックス内の大きな画像をズームできない方法について、モバイルデバイスのライトボックスについてAndroidおよびiPhoneの所有者からさまざまな苦情を受けています.

他にもいくつか問題があります。モバイル デバイスをお持ちの場合は、私の Web サイトをチェックして、私が話していることを視覚化してください: 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 を使用するようにフォールバックします。

説明のために：モーダル要素がジャンプする理由は、その位置が画面のサイズの2倍であるドキュメントの幅によって計算され、スクロール位置を追加して「中央」にするためです。そのため、モーダルをパンすると、スクロール値によってモーダルがその方向にさらに押し出されます。

于 2015-03-05T03:08:58.810 に答える