Instafeed JS模板

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

這使您可以以任何所需的方式顯示圖像。