0

Instafeed.js 画像に jQuery Colorbox を設定しようとしています。両方のスクリプトは個別に正常に動作しますが、カラーボックス クラスを Instafeed.js テンプレート パーツ内の要素に設定しようとすると、カラーボックスが動作しなくなります。

ただし、Colorbox クラスが<a>またはに設定されている場合、Colorbox は Instafeed スクリプトの外で正しく動作し<img>ます。

インスタフィード

var userFeed = new Instafeed({
      get: 'user',
      userId: ,
      limit: 20,
      accessToken: '',
      resolution: 'standard_resolution',
      template: '<a href="{{model.images.standard_resolution.url}}" class="box"><img src="{{image}}" /></a>',
    });
    userFeed.run();

カラーボックス

$(document).ready(function(){
            $(".box").colorbox({transition:"fade"});
        });

ここにも同じ問題がありました: https://github.com/stevenschobert/instafeed.js/issues/198しかし、与えられた解決策は何らかの理由で機能しませんでした。このソリューションでは、画像をクリックしても何も起こりません。投稿に表示されている以前のコードでは、別のウィンドウで画像が開かれました。

Colorbox を Instafeed に設定するために特定のことはありますか? 私はできる限りのことを試しましたが、オンラインではあまりありません。

4

1 に答える 1

3

$(".box")問題は、それらの要素が実際にDOMに追加される前にクエリを実行していることだと思います。Instafeed がアンカー要素のマークアップを DOM に追加した後で、Colorbox を割り当てる必要があります。

Instafeed の APIを見るとafter、まさにこの種のコールバックが提供されています。これはうまくいくはずです：

var userFeed = new Instafeed({
      get: 'user',
      userId: ,
      limit: 20,
      accessToken: '',
      resolution: 'standard_resolution',
      template: '<a href="{{model.images.standard_resolution.url}}" class="box"><img src="{{image}}" /></a>',
      after: function(){
          $(".box").colorbox({transition:"fade"});
      },
    });
    userFeed.run();
于 2015-12-22T18:30:12.703 に答える