photoswipe从flickr或其他feed中获取图片？

Question

我正在使用photoswipe并看到可用的示例，但那里没有任何动态。

有没有人设法从Flickr或其他饲料中获取photoswipe图像，或者知道任何地方的任何示例？

这里的例子网址：

[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

我有这方面的工作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包含“视网膜”缩略图和图像或“标准”缩略图和图像。它在这里和那里都有点不错，但工作正常。

它应该是非常容易的定制您的特定需求和/或删除视网膜检测等