2

我正在使用 instafeed js 获取 instagram 图像以显示在我的网站上。我想提取 5 张图像并将其显示在一起，就像我在codepen上创建的这个示例一样。但是，instafeed js 的模板功能限制了我如何像在 codepen 示例中那样组织图像，因为没有办法将每个图像专门定位到 div。

codepen 上的代码显示了我希望如何放置每个图像。

<div class="row1">
    <div class="column1">
        <a href="#"><img src="/assets/placeholder/c1.jpg" alt="placeholder 1" style="width:100%"></a>
        <a href="#"><img src="/assets/placeholder/c2.jpg" alt="placeholder 2" style="width:100%"></a>
    </div>
  <div class="column1">
      <a href="#"><img src="/assets/placeholder/c3.jpeg" alt="placeholder 3" style="width:100%"></a>
      <a href="#"><img src="/assets/placeholder/c4.jpg" alt="placeholder 4" style="width:100%"></a>
  </div>
  <div class="column1">
      <a href="#"><img src="/assets/placeholder/c5.jpg" alt="placeholder 5" style="width:100%"></a>
    </div>
</div>

这是使用 instafeedjs 的代码

var feed = new Instafeed({
get: 'user',
userId: '3xxxxx01',
accessToken: '3xxxxx3446',
limit: 5,
resolution: 'standard_resolution',
template: '<a href="{{link}}" target="_blank"><img src="{{image}}" /></a>'
  });
feed.run();
4

1 回答 1

0

您可以使用该mock选项仅获取图像数据而不更新 DOM。然后使用该success选项对该数据进行处理：

var feed = new Instafeed({
  get: 'user',
  userId: '3xxxxx01',
  accessToken: '3xxxxx3446',
  limit: 5,
  clientId: 'xxxxxxxxxxxxxx',
  resolution: 'standard_resolution',
  mock: true,
  success: function(images) {
      //iterate over images and add them to the DOM as you wish
  }
});

这允许您以任何您希望的方式显示图像。

于 2019-07-29T20:50:32.540 回答