Photos in different divs using instafeed.js

Question

Photos in different divs using instafeed.js

Navigation

#1 by (2 votes)

3

I'm using the instafeed.js API. I wanted that instead of appearing all the photos in the same div appeared one per div. I tried to use this example but it did not work: example instafeed.js on various divs , create multiple instances of instafeed, one for each div. Any ideas?

instafeed:

var feed = new Instafeed({
    target: 'instafeed1',
    get: 'tagged',
    tagName: 'pizza',
    clientId: '*******',
    limit: 1
});

var feed = new Instafeed({
    target: 'instafeed2',
    get: 'tagged',
    tagName: 'pizza',
    clientId: '******',
    limit: 1
});

 var feed = new Instafeed({
    target: 'instafeed3',
    get: 'tagged',
    tagName: 'pizza',
    clientId: '******',
    limit: 1
});

 var feed = new Instafeed({
    target: 'instafeed4',
    get: 'tagged',
    tagName: 'pizza',
    clientId: '******',
    limit: 1
});

 var feed = new Instafeed({
    target: 'instafeed5',
    get: 'tagged',
    tagName: 'pizza',
    clientId: '******',
    limit: 1
});

 var feed = new Instafeed({
    target: 'instafeed6',
    get: 'tagged',
    tagName: 'pizza',
    clientId: '******',
    limit: 1
});
instafeed1Feed.run();
instafeed2Feed.run();
instafeed3Feed.run();
instafeed4Feed.run();
instafeed5Feed.run();
instafeed6Feed.run();

HTML:

<div id="where1">
    <div></div>
    <div id="instafeed1"></div>
    <div id="instafeed2"></div>
    <div id="instafeed3"></div>
    <div id="instafeed4"></div>
</div>

<div id="where5">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div id="instafeed5"></div>
    <div id="instafeed6"></div>
</div>

javascript html instagram

asked by anonymous 09.10.2014 / 15:35

1 answer

Read more than one .xls file in python Sort results by a relationship column in Laravel 4

score 2 · Accepted Answer

That's exactly what Lucas spoke , use the % option of instafeed and also the template function posted in issue link # 12 .

<style>
.insta-pic {
    background-color: #fcc;
    padding: 5px;
    margin: 5px;
    width: 150px;
    height: 150px;
    float: left;
}
</style>
<h3>Rock Tag</h3>
    <div id="rockTag"></div>
<h3>Glass Tag</h3>
    <div id="glassTag"></div>
<h3>Wood Tag</h3>
    <div id="woodTag"></div>
<script>
function getMultipleTags (tags,client) {
    var feeds = [];
    for (var i=0, len=tags.length; i < len; i++) {
        feeds.push(new Instafeed({
            get: 'tagged',
            tagName: tags[i],
            target: tags[i] + "Tag",
            clientId: client,
            template: '<div class="insta-pic"><a href="{{link}}"><img src="{{image}}" /></a></div>'
        }));
    }
    return feeds;
}
var  client = 'NUMERO-ID';
if( client ) {
    // get multiple tags
    var myTags = getMultipleTags(['glass', 'wood', 'rock'],client);
    // run each instance
    for(var i=0, len=myTags.length; i < len; i++) {
        myTags[i].run();
    }
}
</script>

Demo on JSFiddle .