我正在使用photoswipe並看到可用的示例,但那裏沒有任何動態。photoswipe從flickr或其他feed中獲取圖片?
有沒有人設法從Flickr或其他飼料中獲取photoswipe圖像,或者知道任何地方的任何示例?
這裏的例子網址:
[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]
我正在使用photoswipe並看到可用的示例,但那裏沒有任何動態。photoswipe從flickr或其他feed中獲取圖片?
有沒有人設法從Flickr或其他飼料中獲取photoswipe圖像,或者知道任何地方的任何示例?
這裏的例子網址:
[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]
我創建了一個使用Flickr的API和Photoswipe表現出的Flickr設置爲幻燈片的腳本。它還沒有完全打磨,但非常簡單和可用。只需輸入你的flickr API密鑰並設置ID,剩下的就完成了。
我有這方面的工作on my blog(和博客上講述它是如何工作的簡要here)。我將略過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>
將其置於您的文檔中的適當位置。對我來說,這只是一個身體分裂。
下面更復雜的部分 - 一些JavaScript處理來自flickr的JSON提要。這是從viget.com的舊版教程改編的。請注意,我已經調整它來設置變量來檢測視網膜與非視網膜顯示,並自動計算從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包含「視網膜」縮略圖和圖像或「標準」縮略圖和圖像。它在這裏和那裏都有點不錯,但工作正常。
它應該是非常容易的定製您的特定需求和/或刪除視網膜檢測等