Instafeed - Make images open in new window

Question

I have set up a store where I'm selling products and I wanted to include an Instagram feed on my site.

I decided to use installed and I have it all working except that I'd like the images to open in a new window.

I've looked at some questions on here and tried the templating. The templating stops any images from showing but I'm also seeing no errors in my debugging.

This is what I have:

    <script type="text/javascript">
       var feed = new Instafeed({
         get: 'user',
         userId: 'my-user-id-here',
         accessToken: 'my-access-token-here',
         template: '<a href="{{link}}" target="_blank"><img src="{{image}}"     /></a>',
       limit:8
   });
   feed.run();
</script>

I'm a bit stumped. Any ideas?

Answer 1

The best way to do it, would be to use the template option:

var feed = new Instafeed({
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
  // other settings...
});

OR

In your instafeed.js file, look around line 177 and add anchor.setAttribute('target', '_blank'); works beautifully.

OR you can add popUp also:-

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

    });

});