1

開発しようとしている 1 つのスクリプトで問題が発生したため、投稿しています。

私が作成しようとしているのは、Instagram から画像を受け取るギャラリーです。この 2 つのタスクを達成するために、ニーズに合った 2 つのプラグインを見つけましたが、両方を融合させることはできません。

私は Jquery に比較的慣れていないため、実行しようとしているスクリプトがコードの一部にのみ影響する理由がわかりません。

このサンプル ギャラリーには 2 つの基本的な部分があります。

1) 開発者が事前にロード:

<div class="content-primary"> 
    <ul class="iGallery" id="iGallery">

    <li>
  <a href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_n.jpg">
    <img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10817900_1528499780732950_533530016_s.jpg">
 <li><a class="ui-link" href="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_n.jpg"><img src="http://scontent-b.cdninstagram.com/hphotos-xfa1/t51.2885-15/10831784_752863841449953_2058216615_s.jpg"></a></li></ul>
  </a>
</li>
</ul>

そして、instagram api のおかげで動的に追加されるもの:

<script type="text/javascript">

    (function() {
      var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
      s.type = 'text/javascript';
      s.async = true;
      s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
      t.parentNode.insertBefore(s, t);
    })();
  /* ]]> */
    function createPhotoElement(photo) {
      var innerHtml;
        innerHtml= $('<img>')
        .attr('src', photo.images.thumbnail.url);

       innerHtml = $('<a>')
      .attr('href', photo.images.standard_resolution.url)
      .append(innerHtml)
      .append(innerHtml)
       .addClass( "ui-link" );


      return $('<li>')
        .append(innerHtml);
    }

    function didLoadInstagram(event, response) {
      var that = this;

      $.each(response.data, function(i, photo) {
        $(that).append(createPhotoElement(photo));
      });
    }

    $(document).ready(function() {
      var clientId = 'baee48560b984845974f6b85a07bf7d9';

      $('.iGallery').on('didLoadInstagram', didLoadInstagram);
      $('.iGallery').instagram({
        hash: 'usa123',
        count: 1,
        clientId: clientId
      });

    });
  </script>

さて、主な問題は、ギャラリーを処理する部分が、手動で追加された部分のみを読み取るように見え、instagram api のおかげで来る部分を読み取らないことです。

スクリプトは のような画像の属性を変更するため、私の問題はスクリプトがロードされる時間に関連していると確信していますが、href to data-hrefその情報を事前にロードしようとしましたが、同じ結果を受け取りました。

私の問題を視覚的に理解するために、codepen にスクリプトを用意しました。

http://codepen.io/anon/pen/XJdbZR

赤は動的に追加される画像です

そして、これは私が持っている考えであり、ロードごとの情報のみがスクリプトによって変更されていることを示しています

ここに画像の説明を入力

あらゆる種類の助けやヒントに感謝します。ありがとう

4

2 に答える 2

1

簡単な答えは？<>jQuery 識別子の文字を失います。識別子は、CSS 識別子と同じように扱う必要があります。

すなわち; $('<a>')実際にあるはず$('a')です。

これをテストするには、お気に入りのブラウザ コンソールで両方を実行して、違いを確認してください。

于 2014-12-11T05:56:40.640 に答える
1

問題は、そのページの初期化が最初imageflipにすべてのul#iGallery子にバインドされ、その瞬間に新しい画像がロードされないため、通常は同様のケースで関数 imageflip を再度 ul にバインドする必要があることです。
これで問題が解決すると確信していますが、ここでは別の問題があり、プラグイン構造のためにimageflipを2回バインドすることはできません。
codepen " fixed code " でコードを修正しましたが、これは didLoadInstagram 関数がトリガーされた場合にのみ機能します。

于 2014-12-11T07:59:08.437 に答える