3

I am working with photoswipe and seen the examples available but there's nothing dynamic there.

Has anyone managed to get photoswipe grabbing images from Flickr or other feed or know of any examples anywhere?

Here's the examples url:

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

2 回答 2

2

我创建了一个脚本，它使用 Flickr API 和 Photoswipe 将 flickr 集显示为幻灯片。它还没有完全抛光，但非常简单和可用。只需输入您的 flickr api 密钥并设置 id，剩下的就交给它了。

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

于 2015-02-09T16:59:52.340 回答
1

我在我的博客上有这个工作（并在博客上简要介绍了它是如何工作的）。我将跳过 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>

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

下面是更复杂的部分——一些用于处理来自 flickr 的 JSON 提要的 javascript。这是改编自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 包含“视网膜”缩略图和图像或“标准”缩略图和图像。它在这里和那里有点笨拙，但工作正常。

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

于 2012-06-01T15:15:28.697 回答