0

ギャラリーページでアイソトープを使用しているため、カスタムギャラリーショートコードがあります。基本的に、ギャラリー用のページが 1 つあり、すべての画像をここにドラッグ アンド ドロップし、dessandro によるアイソトープ レイアウトに残りを任せます。さらに、クリックするとフルバージョンの画像が表示されるライトボックスとして Fancybox を使用しています。これらはすべて、私が作成した functions.php カスタム ギャラリーにあります。

見栄えは良いですが、モバイルでは、この機能であるファンシーボックスを無効にしたいと思います。これは、このような小さなデバイスにライトボックスを配置するのが少し面倒だからです。

私の解決策は、functions.php で作成したカスタム ギャラリー関数を無効にして、wordpress のネイティブ ギャラリー (これは新しいアップデート 3.5 ではクールです) が有効になるようにすることです。

ユーザーがモバイル版の画像をクリックすると、カスタム機能が無効になっているため、fancybox ではなく attachment.php テンプレートにリンクします。

良い例は http://thereason.us/です。

このサイトはワードプレスで作成されているので、その可能性を知っています。誰にもアイデアがありますか？

ありがとうございます。

4

1 に答える 1

0

彼らが行っているのは、画面の幅が500ピクセルを超えているかどうかを確認し、超えている場合はライトボックスを開き、そうでない場合はリンクのデフォルトのアクションを維持して添付ページを開きます。

data-attachmentそのため、添付ページへの URL を保持する画像にリンクするアンカーに、または別の属性を追加するように関数を変更することをお勧めします。

次に、JS で、まずクリック イベントをライトボックス化されたリンクにバインドします。たとえば、次のようになります。

(function($){
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").on('click', function(){
        if ( parseInt($(window).width()) < 500 ) {
            window.location.href = $(this).attr('data-attachment');
            return false;
        }
    });
    // Initialize Fancybox
    $(".gallery a[href$='.jpg'], .gallery a[href$='.png'], .gallery a[href$='.jpeg'], .gallery a[href$='.gif']").attr('rel','gallery').attr('class','fancybox').fancybox();
})(jQuery);

次に、ライトボックスをインスタンス化します。これは理論的には、ライトボックスの前に以前の関数をバインドする必要がありますが、100% 確実ではありません。

于 2012-12-12T08:55:10.113 に答える