Dribbble APIを使用して、ポートフォリオWebサイトにドリブルショットを紹介したいと思います。私はPHPの人ではないので、API(http://dribbble.com/api)の使い方がわかりません。
HTMLまたはPHPページにショットを取り込むにはどうすればよいですか?
よろしくお願いいたします。
乾杯!
ショットをサイトにインポートするのに役立つ jquery プラグインの使用を検討する場合があります。例を次に示します ( http://gbin1.com/gb/demoviewer/360/06242ba0-40a1-45fd-946f-cc89e0df64c9/index.html Jribbble v1.0.0 と呼ばれる jQuery プラグインを利用する.htm ) が役立つことを願っています!
この JS を使用して、ユーザー情報を自分の名前に変更します
// variables used
var slgoetzShots;
var slgoetzNum = 1;
var active = "Slgoetz";
// slgoetz shots
function slgoetzGet(pageNum){
var url = "http://api.dribbble.com/slgoetz/shots";
$.get(
url, {page:pageNum, per_page:"30"},
function(data){
slgoetzShots = data;
slgoetzNum += 1;
render(slgoetzShots);
},
"jsonp"
);
};
// slgoetzGet: render
function getSimon(){
if (active != "slgoetz"){
slgoetzGet("1");
$('#'+active).removeClass("active");
$('#Everyone').addClass("active");
active = "Simon Goetz";
slgoetzNum = 1;
};
};
//popular shots is default
getSimon("1")
var inner = "";
var innerP1 = '<li><div class="dribbble"><div class="shot"><a href="';
var innerP2 = '"><img src="';
var innerP3 = '"></a></div><div class="likes">'
var innerP4 = ' Likes</div><div class="comments">'
var innerP5 = ' Comments</div><div class="name">'
var innerp6 = '</div></div></li>'
function render(filter){
for (var i = 0; i<filter.shots.length;i++){
inner = inner + innerP1 + filter.shots[i].url + innerP2 + filter.shots[i].image_url + innerP3 + filter.shots[i].likes_count + innerP4 + filter.shots[i].comments_count + innerP5 + filter.shots[i].title + innerp6;
};
$('.gallery').html(inner);
inner = "";
};
function loadMore(){
switch(active){
case "Simon Goetz":
inner = $('.gallery').html();
slgoetzGet(slgoetzNum.toString());
break;
};
};
HTML .gallery クラスを div に追加する