Instagram popup

Question

The situation

I am using instafeed plugin to load some images from Instagram according to a hashtag. The plunging is working well. Every time a Instagram image is clicked I want to open a light-box in my website window With the image, caption, user name, etc...

var allTagFeed = new Instafeed({
    target: 'instpop',
    get: 'tagged',
    tagName: 'mongolia',
    clientId:'xxxxxxxxxxxx',
    accessToken: 'xxxxxxxxxx',
    limit:'2',
    template: '<div id="caption">{{caption}}  </div><div id="bg"><a href="{{link}}" target="_blank"><img src="{{image}}" /></a>{{likes}}</div>' 
    });

The solution

Create a function that call that specific user information, so I can put it into a template.

The problem

I don't know how to create that function. I also want to ask if someone knows another way to include Instagram picture with it's information (just like instagram.com) in a separated pop up as I don't want the user goes out of my page.

Answer 1

Ok, I found a way:

This function will take the class being used in the template, after being clicked.

var allTagFeed = new Instafeed({
    target: 'inst1all',
    get: 'tagged',
    tagName: 'mongolia',
    clientId:'xxxxxxxxxxxxxxx',
    accessToken: 'xxxxxxxxxxxxxx',
    limit:'32',

      template: '  <div class="cont" ><a  href="{{link}}" target="_blank"><img  src="{{image}}" /></a><div class="bg"><div class="likes"><img src="./img/likes.png">{{likes}}</div><div class="comments"><img src="./img/likes.png">{{comments}}</div></div><div class="caption">{{caption}}</div></div> '

});

 $( document ).ready(function() {
     //alert('s');
    $("#inst1all").on('click','a', function(){
        var _href = $(this).attr("href");
        alert(_href);

    });

});