私はfacebookのグラフを使ってFacebookのポストを表示しています。 デフォルトの石工の初期化:ajaxの呼び出しで石工を初期化する方法
$('#facebook-feed').masonry({
itemSelector: '.grid-item',
percentPosition: true
});
デフォルトのFacebookの投稿:
$(document).ready(function() {
var accessToken ='xxx';
//$("#mainContainer").show();
$.ajax({
url: 'https://graph.facebook.com/v2.5/abc/posts?fields=full_picture,id,is_published,link,story,message,name,updated_time,description,from,source,caption,created_time,permalink_url,type,target&access_token=' + accessToken + '&limit=5',
type: 'GET',
success:function(result){
$.each(result.data, function(index, value) {
var link;
var imgSrc = '';
var name = '';
var message = '';
if(typeof(value.link) != "undefined" && value.link !== null) {
link = value.link;
} else {
link = value.permalink_url;
}
if(typeof(value.full_picture) != "undefined" && value.full_picture !== null) {
imgSrc = value.full_picture;
}
if(typeof(value.name) != "undefined" && value.name !== null) {
name = value.name;
}
if(typeof(value.message) != "undefined" && value.message !== null) {
message = value.message;
}
$("#facebook-feed").append(
'<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+
'<div class="thumbnail">'+
'<img src="'+imgSrc+'" alt="'+name+'" >'+
'<div class="caption">'+
'<h3>'+name+'</h3>'+
'<p>'+message+'</p>'+
'</div>'+
'</div>'+
'</a></div>'
);
});
},
error:function() {
$("#facebook-feed").html('Failed To Load Resource');
}
});
});
は今、私は限界に基づいてより多くのフィードをロードするために使用される負荷よりフィードボタンを持っています。
$(document).on("click", "#load-more-feeds", function() {
$.ajax({
url: $("#hidden-next-feed").val(),
type: 'GET',
success: function(result) {
$("#hidden-next-feed").val(result.paging.next);
$.each(result.data, function(index, value) {
var link;
var imgSrc = '';
var name = '';
var message = '';
if(typeof(value.link) != "undefined" && value.link !== null) {
link = value.link;
} else {
link = value.permalink_url;
}
if(typeof(value.full_picture) != "undefined" && value.full_picture !== null) {
imgSrc = value.full_picture;
}
if(typeof(value.name) != "undefined" && value.name !== null) {
name = value.name;
}
if(typeof(value.message) != "undefined" && value.message !== null) {
message = value.message;
}
var moreFeeds = '<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+
'<div class="thumbnail">'+
'<img src="'+imgSrc+'" alt="'+name+'" >'+
'<div class="caption">'+
'<h3>'+name+'</h3>'+
'<p>'+message+'</p>'+
'</div>'+
'</div>'+
'</a></div>';
var $moreFeeds = $(moreFeeds);
// Append new blocks
$("#facebook-feed").find("div.grid-item:last").after($moreFeeds);
// Have Masonry position new blocks
$("#facebook-feed").find("div.grid-item:last").masonry('appended', $moreFeeds);
/*$("#facebook-feed").find("div.grid-item:last").after(
'<div class="grid-item"><a href="'+value.permalink_url+'" target="_blank">'+
'<div class="thumbnail">'+
'<img src="'+imgSrc+'" alt="'+name+'" >'+
'<div class="caption">'+
'<h3>'+name+'</h3>'+
'<p>'+message+'</p>'+
'</div>'+
'</div>'+
'</a></div>'
);*/
})
},
error:function() {
$("#facebook-feed").html('Failed To Load Resource');
},
})
})
Facebookの投稿はうまくいっていますが、石工は機能していません。これを解決するには?前もって感謝します。
小さなサイドのコメント:あなたは本当に必要ではないjqueryで多くのことをやっています。 $( "#hidden-next-feed")。val() - これはバニラjsの方がはるかに高速で正確です:document.getElementById( 'hidden-next.feed')。 jsを最初に使用し、本当に必要なときにのみjqueryを使用してください。たとえば、jqueryベースのプラグインの場合。 ajaxには、fetch apiがあります。 – luschn