I am using instafeed.js to show my latest instagram images in my website. But by default, image links are opened in same window. This is the JS code: .js/blob/master/instafeed.js more information:

I tried to open links in a new window by using this trick:

<script>
$(function(){
  $("#instafeed a").attr("target","_blank");
});
</script>

But this trick is not working in this situation.

Any Solution? Thanks.

I am using instafeed.js to show my latest instagram images in my website. But by default, image links are opened in same window. This is the JS code: https://github./stevenschobert/instafeed.js/blob/master/instafeed.js more information: http://instafeedjs.

I tried to open links in a new window by using this trick:

<script>
$(function(){
  $("#instafeed a").attr("target","_blank");
});
</script>

But this trick is not working in this situation.

Any Solution? Thanks.

• javascript
• instafeedjs

• 3 I haven't used instafeed before, but can't you use the template option? template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>' – Jop Commented Jun 17, 2014 at 11:58
• @Jop Thanks, but I don't know why this option is not working. Finally I added anchor.target = '_blank'; to JS file and now links opened in new window. – Kasra Commented Jun 17, 2014 at 12:54
• 1 @Kasra - you should never modify a libraries source files directly nor should you ever have to... Steven and Jop have provided you with the correct answers using the templating options available with the plugin. Tested and confirmed working perfectly. – zigojacko Commented Mar 6, 2015 at 16:25

3 Answers 3

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

You shouldn't need to modify the source file directly.

For more information on how templates work, check the documentation on templating.

I update the links in the after function

jQuery(document).ready(function($){
  var loadButton = $('#load-more');
  var feed = new Instafeed({
    get: 'user',
    userId: xxx,
    accessToken: 'xxxx',
    limit:160,
    after: function() {
      $("#instafeed a").attr("target","_blank");
      // disable button if no more results to load
      if (!this.hasNext()) {
        loadButton.attr('disabled', 'disabled');
      }
    }
  });    

  $('#load-more').on('click', function() {
    feed.next();
  });
  feed.run();
});

Gotcha! Following Kasra's logic, found the solution:

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