Question

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

有没有人设法让照片从Flickr或其他Feed获取图片或在任何地方知道任何示例？

以下是url的例子：

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

Answer 1

我创建了一个脚本，该脚本使用Flickr API和Photoswipe将幻灯片组显示为幻灯片。它还没有完全抛光，但非常简单和实用。只需输入你的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>

将其放在适当位置的文档中。对我来说，这只是一个身体div。

下面更复杂的部分 - 一些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包含“视网膜”缩略图和图像或“标准”缩略图和图像。它在这里和那里有点kludgy，但工作正常。

根据您的特定需求进行定制和/或去除视网膜检测等应该是非常简单的。

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

2 个答案: