如何讓我的模板與instafeed.js保持一致，但拉我的個人提要？

因此，我終於完成了主頁和投資組合頁面（現在），並已移到頁面上我想加載我的instagram飼料。我喜歡的模板只會拉動「流行」的頁面圖像，當我更改它以拉動我的圖片失敗時。包含模板項目時，拉動Feed的代碼停止工作。他們爲什麼取消對方？如何讓我的模板與instafeed.js保持一致，但拉我的個人提要？

注：大量的代碼即將到來。我會將此視爲清楚，我可以

的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>

工作的腳本拉「人氣頁照片」

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

將拉我的圖像的工作腳本：

 <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>

但沒有奏效。什麼是導致取消？

來源

2014-01-14 rivenagares

我面臨同樣的問題。您應該在{{image}}之前加http:。

所以工作模板wiil是：

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

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

來源

2014-03-31 15:05:52

如何讓我的模板與instafeed.js保持一致，但拉我的個人提要？

回答

相關問題