Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/447.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Photosweep是否从flickr或其他源获取图像?_Javascript_Jquery_Rss_Photoswipe - Fatal编程技术网

Javascript Photosweep是否从flickr或其他源获取图像?

Javascript Photosweep是否从flickr或其他源获取图像?,javascript,jquery,rss,photoswipe,Javascript,Jquery,Rss,Photoswipe,我正在使用Photosweep,看到了可用的示例,但没有任何动态 有没有人能从Flickr或其他订阅源获取Photoswip抓取图像,或者知道任何地方的示例 以下是url示例: [http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1] 我有这个功能(并在博客上简要介绍了它的工作原理)。我将跳过Photosweep的基本安装,您可以从他们的教程中获得。以下是我用来访问flickr的代码: <script typ

我正在使用Photosweep,看到了可用的示例,但没有任何动态

有没有人能从Flickr或其他订阅源获取Photoswip抓取图像,或者知道任何地方的示例

以下是url示例:

[http://www.photoswipe.com/latest/examples/04-jquery-mobile.html][1]
我有这个功能(并在博客上简要介绍了它的工作原理)。我将跳过Photosweep的基本安装,您可以从他们的教程中获得。以下是我用来访问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提要。这是从一个较旧的教程改编自。请注意,我已经对其进行了调整,以设置一个变量来检测视网膜与非视网膜显示,并自动计算flickr返回的照片数量。使用下面的脚本创建一个文件,并在Photosweep页面上链接到该文件

函数jsonFlickrApi(rsp){ //检测视网膜 视网膜var=window.devicePixelRatio>1?真:假; //确保一切正常 如果(rsp.stat!=“正常”){ 返回; } //计算响应的数量 var num=rsp.photoset.photo.length; //变量“r”+“s”包含 //由以下循环生成的标记 //r=视网膜,s=标准 var r=“”; var s=“”; //这个循环贯穿每一个项目,并创建HTML,这些HTML将很好地显示在您的页面上 对于(变量i=0;i' } 否则{ q='
    '+s+'
' } //这告诉JavaScript将变量q中的所有内容写入页面 书面文件(q); } 基本上就是这样。它将q的内容写入您将上述
放入页面的任何位置。q包含“视网膜”缩略图和图像或“标准”缩略图和图像。这里和那里有点混乱,但效果很好


根据您的具体需要进行自定义和/或删除视网膜检测等操作应该非常简单。

我创建了一个脚本,使用Flickr API和Photosweep将Flickr集显示为幻灯片。它还没有完全抛光,但非常简单和实用。只需输入flickr api密钥并设置id,其余的工作就完成了

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