Question

我正在使用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();

Answer 1

您可以使用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
  }
});

这可让您以所需的任何方式显示图像。

Instafeed JS模板

1 个答案: