将图像上传到 Galleria 时使用 Flickr答案

【问题标题】：Using Flickr when uploading images to Galleria将图像上传到 Galleria 时使用 Flickr
【发布时间】：2012-12-11 07:49:57
【问题描述】：

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

有一个关于如何安装 Flickr 插件的页面，但不清楚我们应该在#galleria div 和放置链接脚本的位置之间做什么。

这是我所拥有的（不起作用，只是给了我一个黑匣子）

<!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 html flickr galleria

【解决方案1】：

在你的 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>

注意：上面的示例代码还设置了许多选项，以使画廊响应并使用移动滑动手势（将“响应”和“滑动”设置为 true）。此外，您应该在 CSS 样式块或样式表中设置画廊容器 (#galleria) 的宽度和高度，以便 Galleria 知道如何正确调整它的大小——如果您希望 Galleria 自动响应地调整画廊的大小，请设置高度Galleria 选项中的比率（示例中为 0.57）。有关选项的更多详细信息，请参阅Galleria docs -- http://galleria.io/docs/。

要使用 flickr 插件来显示搜索结果，只需指定搜索词并可选择设置要显示的“最大”图像数量（我认为 detault 是 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/

【讨论】：