Question

所以我正在尝试使用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帐户？

Answer 1

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

load 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选项中的比率（示例中为.57）。有关选项的详细信息，请参阅Galleria docs -- 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/

将图像上传到Galleria时使用Flickr

1 个答案: