0

Instagram API を介して取り込んでいる画像に JavaScript カウンターを追加しようとしています。希望は、カウンターを追加することで、画像に一意の ID を付けて、それらをスライダーで操作できるようにすることです。カウンターについて学び始めたばかりで、どんな助けでも大歓迎です!


画像を使って作業しているページは次のとおりです。http://carabinercoffee.com/instagram.html


以下は、instafeed.js プラグインで使用しているコードです。テンプレート セクションを何かで使用する方法があると思いますが、それは単なる推測です。

<script type="text/javascript">
    var userFeed = new Instafeed({
       get: 'user',
       userId: xxxxxxx,
       accessToken: 'xxxxxxxxx',
       limit: 24,
       resolution: 'low_resolution',
       template: '<a href="{{link}}"><img src="{{image}}"/></a>',
       useHttp: true ,

  });

  userFeed.run();
</script>
4

2 に答える 2

1

各タグに ID を発行するだけの場合aは、次のコードを使用できます。

var aTags = document.getElementsByTagName('a');

for (var i = 0; i < aTags.length; i++) {
    aTags[i].setAttribute("id", i);
}

このコードは、現在のページのすべてのタグを循環しa、増分 ID を発行します。

前：

  <a href="google.com">Test</a>
  <a href="google.com">Test</a>
  <a href="google.com">Test</a>
  <a href="google.com">Test</a>
  <a href="google.com">Test</a>

後：

  <a id="0" href="google.com">Test</a>
  <a id="1" href="google.com">Test</a>
  <a id="2" href="google.com">Test</a>
  <a id="3" href="google.com">Test</a>
  <a id="4" href="google.com">Test</a>
于 2014-12-30T02:09:15.933 に答える
-1

mwilson の回答と instafeeed コードへの小さな追加により、この問題は解決しました。mwilson のソリューションを有効にするには、プラグインのコードにafter 関数を追加する必要がありました。コードは次のとおりです。

<script type="text/javascript">

$(document).ready(function() {
var userFeed = new Instafeed({
   get: 'user',
    userId: xxxxxxx,
    accessToken: 'xxxxxxx',
    limit: 24,
    resolution: 'low_resolution',
    template: '<a href="{{link}}"><img src="{{image}}" id="{{id}}"/></a>',
    useHttp: true,

    after: function () {

    var aTags = document.getElementsByTagName('img');
    for (var i = 0; i < aTags.length; i++) {
    [i].setAttribute("id", i);}
    },
});
userFeed.run();
});

</script>
于 2014-12-30T08:00:02.003 に答える