2

レスポンシブな Wordpress テーマで Instagram ギャラリーに取り組んでいますが、助けが必要な問題がいくつか見つかりました。

ajax と jsonp を使用して Instagram フィードを取得し、結果をいくつかの空の div に追加しています。私が使用している簡略化されたコードは次のとおりです。

    $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/accesstoken",
      success: function(data) {
          for (var i = 0; i < 7; i++) {
                          var boxitem = "#instabox" + i;
              $(boxitem).append("<a target='_blank' href='" + data.data[i].link +"'><img src='" + data.data[i].images.low_resolution.url +"'/></a>");
    }
    }

このスクリプトは、Instagram の各写真を特定の div ("id=instabox1"、"id=instabox2" など) に割り当てます。このコードは正常に動作しています。

写真が反応するように、 jQuery Backstretch プラグインを使用したいと思います。それを機能させるには、次のコードを使用するだけです。

    $("#instabox0").backstretch("http://server/instagrampicture.jpg");

このコード行は正常に機能しているため、backstretch.js が適切にロードされ、正常に機能しています。

だからここに私が抱えている問題があります。Instagram から最新の写真を取得し、それらを backstretch プラグインに動的に割り当てることで応答性を高めたいと考えています。最初に試みたのは、成功セクションの ajax 関数で backstretch メソッドを呼び出すことです。

    $.ajax({
      type: "GET",
      dataType: "jsonp",
      cache: false,
      url: "https://api.instagram.com/accesstoken",
      success: function(data) {
          for (var i = 0; i < 7; i++) {
                      var boxitem = "#instabox" + i;
          $(boxitem).backstretch(data.data[i].images.low_resolution.url);             
    } }

data.data[i].images.low_resolution.url が画像の正しいパスを与えることを考えると、これにより、boxitem (#instabox0、#instabox1、...) によって定義された ID に backstretch メソッドが適用されるので、 div は順番に入力されます。

それが機能しない部分で、エラーが発生します: Uncaught TypeError: Object [object Object] has no method 'backstretch'

したがって、メソッド .backstretch を $.ajax 関数の外側で使用すると、正常に動作します (ただし、Instagram の写真の動的パスは取得されません)。

$.ajax 関数内でメソッド .backstretch を使用すると、前述のエラーが発生します。

バックストレッチ画像のコード行を文字列として動的に記述し、それらを配列内および ajax 関数の外側に格納して評価するなど、多くのことを試しました。

    strScript = '$("#instabox' + i + '").backstretch("' + data.data[i].images.low_resolution.url + '");';
    eval(strScript);

しかし、「メソッド 'backstretch' がありません」というエラー メッセージが常に表示されます。

また、スクリプト セクションを作成し、次のような動的に生成された適切なバックストレッチ コードを入力しました。

    <script>
    $("#instabox0").backstretch("http://server/instagrampicture0.jpg");
    $("#instabox1").backstretch("http://server/instagrampicture1.jpg");
    </script>

ただし、ページがロードされたときに実行されません。

何か助けはありますか？Ajax jsonp 関数内で .backstretch メソッドを使用するにはどうすればよいですか? Instagram の写真を別の方法で取得した方が簡単でしょうか? スクリプト セクションを作成することはできますが、ページが既に読み込まれているときにどのように実行できますか?

どうもありがとう、私はプロのプログラマーではないので、この問題で少し立ち往生しています。皆さんにとって明らかなことを見落としているかもしれませんが、私は何日もそれを解決しようとしてきました。

どんな助けでも大歓迎です。

4

1 に答える 1

0

私なら、.backstretch() が呼び出されたときに動作する外部で使用できる Ajax ループ内に画像 URL の配列を作成します。

var images = [];
success: function(data) {
    for (var i = 0; i < 7; i++) {
        images.push(data.data[i].images.low_resolution.url); 
    }            
}
$.each(images, function(index, value) {
    var boxitem = "#instabox" + index;
    $(boxitem).backstretch(value);
});
于 2013-03-05T15:10:31.933 に答える