javascript - photoswipeはflickrまたは他のフィードから画像を取得しますか？

Question

私はフォトスワイプで作業していて、利用可能な例を見ましたが、そこには動的なものは何もありません。

誰かがFlickrや他のフィードから写真ワイプを取得する画像を取得したり、どこかで例を知っている人はいますか？

URLの例は次のとおりです。

[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]

Answer 1

Flickr APIとPhotoswipeを使用して、Flickrセットをスライドショーとして表示するスクリプトを作成しました。まだ完全には磨かれていませんが、非常にシンプルで使いやすいです。flickr apiキーを入力してidを設定するだけで、後はすべて実行されます。

https://github.com/lyoshenka/photoswipe-flickr

Answer 2

私はこれを私のブログで機能させています（そしてそれがどのように機能するかについてここで簡単にブログに書いています）。チュートリアルから入手できるphotoswipeの基本的なインストールはスキップします。flickrにアクセスするために使用したコードは次のとおりです。

<script type="text/javascript" language="javascript"
src="http://api.flickr.com/services/rest/?method=flickr.photosets.getPhotos&
api_key=[YOUR APRI KEY]&photoset_id=[YOUR PHOTOSETID]&format=json&
extras=original_format"></script>

これをドキュメントの適切な場所に配置します。私にとって、それはちょうどボディdivにあります。

より複雑な部分は以下のとおりです-flickrからのJSONフィードを処理するためのJavaScript。これは、 viget.comの古いチュートリアルから採用されました。Retinaディスプレイと非Retinaディスプレイを検出する変数を設定し、flickrから返された写真の数を自動的にカウントするように調整したことに注意してください。以下のスクリプトを使用してファイルを作成し、PhotoSwipeページでそのファイルにリンクします。

function jsonFlickrApi(rsp) {

//detect retina
var retina = window.devicePixelRatio > 1 ? true : false;

//makes sure everything's ok
if (rsp.stat != "ok"){
return;
}

//count number of responses
var num = rsp.photoset.photo.length;

//variables "r" + "s" contain 
//markup generated by below loop
//r=retina, s=standard
var r = "";
var s = "";

//this loop runs through every item and creates HTML that will display nicely on your page
for (var i=0; i < num; i++) {
photo = rsp.photoset.photo[i];

//create url for retina (o=original, bt=big thumb) and standard (st=standard thumb,
//so= flickr "large")
o_url = 'http://farm'+ photo.farm +'.staticflickr.com/'+ photo.server +'/'+ 
photo.id +'_'+ photo.originalsecret +'_o.jpg';

bt_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+ 
photo.id +'_'+ photo.secret +'_q.jpg';

st_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+ 
photo.id +'_'+ photo.secret +'_s.jpg';

so_url = 'http://farm'+ photo.farm +'.static.flickr.com/'+ photo.server +'/'+ 
photo.id +'_'+ photo.secret +'_b.jpg';

r += '<li><a href="'+ o_url +'"><img alt="'+ photo.title +'" src="'+ bt_url +'" title="Click to view '+ photo.title +' full size"/></a></li>';
s += '<li><a href="'+ so_url +'"><img alt="'+ photo.title +'" src="'+ st_url +'" title="Click to view '+ photo.title +' full size"/></a></li>';
}

//should be self explanatory
if (retina){
q = '<div id="MainContent"><ul id="Gallery" class="gallery">'+ r +' </ul></div>'
}
else{
q = '<div id="MainContent"><ul id="Gallery" class="gallery">'+ s +' </ul></div>'
}

//this tells the JavaScript to write everything in variable q onto the page
document.writeln(q); 
}

基本的にはそれだけです。上記をページのどこに配置しても、qの内容が書き込まれ<script>ます。qには、「網膜」のサムネイルと画像、または「標準」のサムネイルと画像のいずれかが含まれます。あちこちで少しぎこちないですが、うまく機能します。

特定のニーズに合わせてカスタマイズしたり、網膜検出などを削除したりするのは非常に簡単です。