1

view.js ( http://finegoodsmarket.com/view/ ) を使用してライトボックス サポートを追加することを含む、tumblr ポートフォリオ ( http://hirebeamish.tumblr.com/ ) のテーマをハックしています。

これまでのところすべてを機能させることができましたが、アイテムが 15 個を超えると、無限スクロールが開始され、ライトボックス全体が崩壊します。ページが作成されたときにページに新しいアイテムがなかったため、ライトボックス スクリプトはそれらを検出しなかったと思います。

これをどうにかして機能させることが可能かどうかは誰にもわかりませんか？別のライトボックス スクリプトが必要ですか?

4

1 に答える 1

3

基本的にあなたの問題は、AJAX呼び出し後にview.jsが自動更新されないことです。これはひどいものです。

次のように view.js の更新を強制できます。

new View( $('.view') );

一番下までスクロールした後、コンソールに貼り付けてこれをテストできます。これで、画像が正常に機能するようになります。

ただし、無限スクロールが開始された後に DOM が更新されるたびに、それを実行する方法を見つける必要があります。

では、これを別の方法で行いましょう。次のコード行をテーマのどこかに追加します。

$(document).on('click', 'a.imageView', function(e){
    e.preventDefault();
    $('.viewer').remove(); //This is to remove any previous viewers
    var s = $(this).attr('href');
    var v = new View ($('.imageView')); 
    v.open(); 
    v.show(s);
});

このコードが行うことは、ドキュメント全体にリスナーを作成し、クリックされるたびに、クリックされた要素が「ビュー」クラスでアンカーされている場合に関数を実行します。次に、すべての画像で満たされた配列で新しいビューを手動で作成します。毎回アレイを構築するため、これは最善の解決策ではありませんが、問題は解決するはずです。

これが役に立ったことを願っています。

更新: OK では、アンカーの href 属性を取得して、サムネイルではなく実際の画像を取得します。また、view.js は自動的に「view」クラスを取得するように設定されているようです。たとえば、アンカー クラスを「view」から「imageView」に変更します。そうすれば、2 つのライトボックスを開くことはありません。また、画像をクリックするたびに新しいオブジェクトを作成しているため、remove() を使用して以前のビューアーをすべて削除する必要があります。

于 2013-08-01T21:07:16.353 に答える