이미지에 자바 카운터 추가하기

Question

나는 인 스턴 그램 API를 통해 가져 오는 이미지에 자바 스크립트 카운터를 추가하려고합니다. 희망은 카운터를 추가하여 이미지에 고유 ID를 부여하여 슬라이더로 조작 할 수있게하는 것입니다. 나는 방금 카운터에 대해 배우기 시작했고 모든 도움이 크게 감사 할 것입니다! 다음은

http://carabinercoffee.com/instagram.html 내가 instafeed.js 플러그인으로 사용하고 코드입니다 :

는 여기에 내가 이미지와 함께 일하고 있어요 페이지입니다. 템플릿 섹션을 사용하여 무언가를 작업 할 수있는 방법이있을 것이라고 생각하지만 이는 단지 추측에 불과합니다. 현재 페이지의 모든 a 태그를 통해

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

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

이 코드 의지주기 및 증분 ID를 발급 : 당신은 단순히 id를 각 a 태그를 발행하려면

<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> 

Answer 1

, 다음과 같은 코드를 사용할 수 있습니다 .

<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> 

Answer 2

mwilson의 대답은 instafeeed 코드로 추가이 문제를했다. mwilson의 솔루션을 적용하기위한 플러그인 코드에 함수 뒤에 을 추가해야했습니다. 여기에 코드가 있습니다 :

<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>