将图片上传到Galleria时使用Flickr

所以我尝试使用JavaScript图像库框架Galleria。http://galleria.io/

这里有一个关于如何安装Flickr插件的页面，但还不清楚我们应该在#galleriadiv和将链接脚本放在哪里之间做什么。

这是我的(不起作用，只是给了我一个黑匣子)

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script src="galleria/galleria-1.2.8.min.js"></script>
<script src="plugins/flickr/galleria.flickr.min.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
</head>
<body>
<?php
//header
include("header.php");
?>  
<div id="content">
<div id="galleria">
</div>
<script>
Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js');
Galleria.run('#galleria', {
flickr: 'search:galleria'
});
</script>
</div>  
<div id="footer">
</div>
</body>
</html>

还想知道如何链接到特定人的Flickr帐户？

在您的javascript部分中——您可以将其放置在页眉或页面底部，或者您通常放置javascriopt代码的任何位置——您应该：

加载jquery
加载galleria脚本(galleria-1.2.8.min.js)
加载galleria-flickr插件脚本(plugins/flickr/galleria.flickr.min.js)

然后，在document.ready()块中：

加载您正在使用的galleria主题(经典、十二页、对开本等)
使用jquery选择器附加库并设置选项

下面是一个基于HTML页面的示例：

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="geordie.css" />
<script type="text/javascript" src="geordie.js"></script>
<title>Home</title>
<meta charset="UTF-8"/>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./galleria/galleria-1.2.8.min.js"></script>
<script type="text/javascript" src="./galleria/plugins/flickr/galleria.flickr.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Galleria.loadTheme('./galleria/themes/classic/galleria.classic.min.js');
$("#galleria").galleria({
responsive: true,
height: .57,
imageCrop: false,
thumbCrop: 'height',
carousel: false,
showInfo: true,
swipe: true,
easing: 'galleriaOut',
transition: 'pulse',
flickr: 'search:leica',
flickrOptions: {
max: 10
}
});
});
</script>
<style>
#galleria
{
width: 100%;
height: auto;
}
</style>
</head>
<body>
<?php
//header
include("header.php");
?>
<div id="content">
<div id="galleria"></div>
</div>
<div id="footer">
</div>
</body>
</html>

注意：上面的示例代码还设置了许多选项，以使图库具有响应性，并使用移动滑动手势(将"响应"one_answers"滑动"设置为true)。此外，您应该在css样式块或样式表中设置库容器(#galleria)的宽度和高度，以便galleria知道如何正确调整其大小——如果您希望galleria自动调整库的大小，请在galleria选项中设置高度比(本例中为.57)。参见Galleria文档——http://galleria.io/docs/有关选项的更多详细信息。

要使用flickr插件显示搜索结果，只需指定一个搜索词，并可以选择设置要显示的图像的"最大"数量(我认为默认值为30)。在上面的例子中，max设置为10:

$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'search:leica',
flickrOptions: {
max: 10
}
});

要显示flickr用户的公共照片，请执行

$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'user:library_of_congress',
flickrOptions: {
max: 10
}
});

要显示照片集，请执行

$("#galleria").galleria({
// your other galleria options here...
// set flickr plugin options here:
flickr: 'set:72157618541455384',
flickrOptions: {
max: 10
}
});

您还可以通过标签显示照片(使用"标签"选项)。插件文档页面上列出了这些选项：

http://galleria.io/docs/plugins/flickr/

相关内容

最新更新

热门标签：