Flickrアプリ

検索…
Flickrアプリ
このサンプルアプリでは、Flickr から画像を取得して、スライドショーをします。
デモ
​​
プロジェクトをインポート​
テスト環境
Android 11.0
iOS 14.3
ファイル構成
ファイル
説明
index.html
スタート画面のページ
css/style.css
プロジェクトのスタイルシート
js/main.js
プロジェクトの JavaScript ファイル
js/jquery.bxslider.js
写真のスライドアニメ用の Javascript ファイル
images/*.png
このプロジェクトで使用する画像ファイル
必要な JS/CSS コンポーネント
jQuery                                                   
HTML の解説
index.html ファイル内の次の記述 ( HTML の  内 ) で、タイトルバー ( title-bar )、スピナー ( loadSpinner / 「 処理中 」 を示す画像 )、コンテナ ( container ) を使用して、画像の表示を行います。
1
<div id="title-bar">
2
    <h2>Monaca Photo Viewer</h2>
3
</div>
4
<div id="loadSpinner"></div>
5
<div id="container"></div>
6
<div id="bottom">
7
  <img src="images/logo-monaca.png" width="160">
8
</div>
Copied!
JavaScript の解説
このサンプルアプリには、2 つのメインの関数があります。
jsonFlickrFeed()
Flickr API の読み込み時に、jsonFlickrFeed() を呼び出します。Flickr API 自体は、 index.html の読み込み時に呼び出されます。
1
<script src="http://api.flickr.com/services/feeds/photos_public.gne?format=json" defer></script>
Copied!
の一行が、index.html のヘッダー内に記述されており、ここで Flickr API を呼び出しています。この関数では、ローカル変数 images に取得した画像を格納して、 displayPicture() 関数を 1 秒毎に呼び出し、カルーセル形式のスライドショーとして、画像を表示しています。この関数の JavaScript コードを次に記します。
1
var images = [];
2
​
3
// This function is fired when the Flickr API is loaded.
4
function jsonFlickrFeed(result) {
5
  for (var j in result.items) {
6
    var img = result.items[j].media.m;
7
    images.push(img);
8
  }
9
​
10
  // display next photo every 1 second
11
  setTimeout(displayPicture, 1000);
12
}
Copied!
displayPicture()
displayPicture() では、 images 変数に格納された画像 ( Flickr から取得 ) を、 index.html 内で作成したコンテナ ( container ) を使用して表示します。この関数の JavaScript コードを次に示します。
1
//Display the retrieved photos from Flickr as a slide show
2
function displayPicture() {
3
  $("#container").css("visibility", "hidden");
4
  var $ul = $("<ul>");
5
​
6
  for(var j in images) {
7
    var srcUrl = images[j];
8
    li = '<li><img src="' + srcUrl + '" id ="list" width="60%"  /></li>';
9
    $ul.append($(li));
10
  }
11
​
12
  $("#container").append($ul);
13
  //Setting for photo sliding animation
14
  $ul.bxSlider({
15
    auto: true,
16
    pager: false,
17
    speed: 500,
18
    pause: 1800,
19
    controls: false,
20
  });
21
​
22
  $("#loadSpinner").remove();
23
  $("#container img").addClass("shadow");
24
​
25
  setTimeout(function() {
26
    $("#container").css("visibility", "visible");
27
  }, 1000);
28
}
Copied!
最終更新 5mo ago
リンクのコピー