Question

所以我最终完成了主页和投资组合页面（暂时），并且已经移动到我想要加载我的Instagram Feed的页面上。我喜欢的模板只能吸引流行的＆＃34;页面图像，当我更改它以拉我的图片失败。当我包含模板项时，拉取我的Feed的代码停止工作。为什么他们互相取消？

注意：很多代码都来了。我尽可能清楚地标记

CSS：

/* main content - instagram
------------------------------------------------------------------- */

#instafeed a {
  padding:5px 5px 1px 5px;
  margin:10px;
  border:1px solid #e1e1e1;
  display:inline-block;
  border-radius: 4px;
  position:relative;
}

#instafeed .likes {
  background:rgba(222,89,135,0.8);
  font-family:sans-serif;
  font-size:1em;
  position:absolute;
  color:#ffffff;
  right:5px;
  top:5px;
  left:5px;
  opacity:0;
  text-align:center;
  line-height:150px;
  text-shadow:0 1px rgba(0,0,0,0.5);
  -webkit-font-smoothing:antialiased;
  -webkit-transition: opacity 100ms ease;
    -moz-transition: opacity 100ms ease;
    -o-transition: opacity 100ms ease;
    -ms-transition: opacity 100ms ease;
    transition: opacity 100ms ease;
}

#instafeed a:hover .likes {
  opacity:1;
}

HTML：

<div id="instafeed"></div>

工作脚本，用于提取＆＃34;热门页面照片＆＃34;

var feed = new Instafeed({
  clientId: 'fae4f4b283b44eabbe4186ff9911ef65',
  limit: 20,
  sortBy: 'most-liked',
  after: function () {
    var images = $("@rbphotographs").find('a');
    $.each(images, function(index, image) {
      var delay = (index * 75) + 'ms';
      $(image).css('-webkit-animation-delay', delay);
      $(image).css('-moz-animation-delay', delay);
      $(image).css('-ms-animation-delay', delay);
      $(image).css('-o-animation-delay', delay);
      $(image).css('animation-delay', delay);
      $(image).addClass('animated flipInX');
    });
  },
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div     class="likes">&hearts; {{likes}}</div></a>'
});
feed.run();

将拉动我的图像的WORKING脚本：

        <script type="text/javascript">
            var userFeed = new Instafeed({
                get: 'user',
                userId: myID,
                accessToken: 'myToken'
            });
            userFeed.run();
        </script>

我尝试了这两个功能：

        <script type="text/javascript">
            var userFeed = new Instafeed({
                get: 'user',
                userId: my userID,
                accessToken: 'myToken'
  limit: 20,
  sortBy: 'most-liked',
  after: function () {
    var images = $("@rbphotographs").find('a');
    $.each(images, function(index, image) {
      var delay = (index * 75) + 'ms';
      $(image).css('-webkit-animation-delay', delay);
      $(image).css('-moz-animation-delay', delay);
      $(image).css('-ms-animation-delay', delay);
      $(image).css('-o-animation-delay', delay);
      $(image).css('animation-delay', delay);
      $(image).addClass('animated flipInX');
    });
  },
  template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'
});
            });
            userFeed.run();
        </script>

但它没有用。导致取消的原因是什么？

Answer 1

我遇到了同样的问题。您应该在http:之前添加{{image}}。

所以工作模板将是：

template: '<a href="{{link}}" target="_blank"><img src="http:{{image}}" /><div class="likes">&hearts; {{likes}}</div></a>'

更新：https://github.com/stevenschobert/instafeed.js/issues/75

如何保存我的模板与instafeed.js，但拉我的个人饲料？

1 个答案: