0

So I'm trying to use the JavaScript image gallery framework Galleria. http://galleria.io/

There is a page on how to install the Flickr plugin but it is quite unclear as to what we should be doing in between the #galleria div and where to place the linking script.

Here's what I have (which isn't working, just giving me a black box)

<!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>

Also wondering how to link to a specific person's Flickr account?

4

1 に答える 1

1

JavaScript セクションでは、これをヘッダー、ページの下部、または通常 javascriopt コードを配置する場所に配置できます。次のことを行う必要があります。

  • jqueryをロードする
  • ガレリア スクリプトをロードします (galleria-1.2.8.min.js)
  • ガレリア flickr プラグイン スクリプト (plugins/flickr/galleria.flickr.min.js) をロードします。

次に、document.ready() ブロックで:

  • 使用しているガレリアのテーマ (クラシック、12、フォリオなど) を読み込みます。
  • 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) の幅と高さを設定して、ガレリアが正しくサイズを変更する方法を認識できるようにする必要があります。比率 (例では .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
    }
});

タグで写真を表示することもできます (「タグ」オプションを使用)。オプションは、プラグインのドキュメント ページで概説されています。

于 2012-12-11T23:11:36.343 に答える