photoswipe 从 flickr 或其他 feed 获取图像？

发布于 2024-12-16 22:40:08 字数 218 浏览 1 评论 0原文

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

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

这是示例网址：

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

原文

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]

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

怂人 2024-12-23 22:40:08

我创建了一个脚本，该脚本使用 Flickr API 和 Photoswipe 将 flickr 设置显示为幻灯片。它尚未完全完善，但非常简单且可用。只需输入您的 flickr api 密钥并设置 ID，它就会完成剩下的工作。

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

回复收藏 0 原文

和我恋爱吧 2024-12-23 22:40:08

我在我的博客上（并在博客中简要介绍了它的工作原理此处）。我将跳过 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 中。

下面是更复杂的部分——一些 javascript 来处理来自 flickr 的 JSON feed。这是改编自 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 的内容写入到页面中放置上述

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

I have this working on my blog (and blogged about how it works briefly here). I'll skip over the basic installation of photoswipe, which you can get from their tutorials. Here's the code I used to access 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>

Place this in your document in the appropriate spot. For me, that's just in a body div.

The more complicated part is below -- some javascript to handle the JSON feed from flickr. This was adapted from an older tutorial from viget.com. Note that I've adapted it to set a variable to detect retina vs non-retina displays and also to automatically count the number of photos returned from flickr. Create a file with the script below and link to it on your PhotoSwipe page(s).

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); 
}

That's basically it. It writes the contents of q into wherever you placed the above <script> into the page. q contains either a 'retina' thumbnail and image or a 'standard' thumbnail and image. Its a little kludgy here and there, but works fine.

It should be pretty trivial to customize to your specific needs and/or remove retina detection, etc.

回复收藏 0 原文

~没有更多了~